BootStrap表文本省略号不能与响应式Web一起使用？

Question

我试图在Table标签中实现String省略号.

源代码如下.

<div>
  <div class="widget-body no-padding" style="min-height:0px;">
    <table class="table" style="table-layout: fixed;">
      <tbody>
        <c:forEach var="item" items="${result.stuffList}" varStatus="idx">
          <c:if test="${idx.index < 5}">
            <tr>
              <td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;">
                <nobr>
                  <a href="#" onclick="javascript:location.href='/view?nid=${item.id}'">${item.name}</a>
                </nobr>
              </td>
              <td class='text-center' style="width: 20%;">
                ${item.regDate}
              </td>
            </tr>
          </c:if>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

这段代码有效,如果String太长,它会显示...我的预期.

但是,当我测试响应时,它会变得难看.

我写了以下部分来表达项目注册日期.

但是当浏览器缩小时,它的后部不会出现在屏幕上.

<td class='text-center' style="width: 20%;">
  ${item.regDate}
</td>

如何在所有浏览器中使用Bootstrap中的省略号？

---

所以它看起来像这样

我所期望的(缩小浏览器时)>>

第1栏/第2栏

AAAA ..../2014-09-24

现在看起来像>>

第1栏/第2栏

AAAA ..../2014-09

问题是>>

在我添加String省略号函数之前,它可以响应.

我的猜测>>

也许table-layout: fixed;风格是原因.但不知道如何实现String省略函数table-layout.

我希望它比我先问的更清楚:D

---

我有原因

问题是宽度:80%,width: 20%,table-layout:fixed.

因此,当我调整浏览器大小时,它会采用这些选项.

但我仍然不知道如何更换它.

所有这些都在div中,这是网站的一小部分,我想要响应式网络.

---

选择答案后编辑.

谢谢回答我的问题!

但是我找到了原因,但无法解决这个问题.

所选择的答案并不相关,但它很有帮助.

我的问题不是通过bootstrap,而是宽度.

即使使用响应式Web库,

如果您使用宽度%或px属性,则无法响应.

Answer 1

你必须将所有样式应用于省略号元素.

{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

感谢这篇文章,找到了一个半工作的解决方案,不需要固定的表,所以反应灵敏.我在FF 43,Opera 34和Chrome 47上测试了它:

.ellipis {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

但是,如果某些数据已存在于单元格中,它将跳转到下一行...