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中的省略号？

所以它看起来像这样

我的期望（缩小浏览器时）＆gt;＆gt;

第1栏/第2栏

AAAA .... / 2014-09-24

现在看起来像＆gt;＆gt;

第1栏/第2栏

AAAA .... / 2014-09

问题是＆gt;＆gt;

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

我的猜测＆gt;＆gt;

也许table-layout: fixed;风格是原因。但不知道如何在没有table-layout的情况下实现String省略号函数。

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

我有原因

问题是宽度：80%，width: 20%，table-layout:fixed。

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

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

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

选择答案后编辑。

感谢您回答我的问题！

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

所选择的答案无关紧要，但这很有帮助。

我的问题不是通过bootstrap，而是宽度。

即使使用自适应网络库，

如果您将宽度与%或px属性一起使用，则

无法响应。

Answer 1

你必须将这种样式应用于省略号元素。

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

Answer 2

感谢this post，找到了一个半工作的解决方案而不需要固定的表，所以反应灵敏。我在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;
}

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

Answer 3

如果您使用的是bootstrap，则可以使用text-nowrap类，只使用两个样式属性style="overflow: hidden;text-overflow: ellipsis;"

完整示例：

<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">

Answer 4

20％是一个建议，表格布局会忽略它。在表格单元格内放置一个具有适当宽度（或最大宽度）的div，并将文本放在该div中。

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

4 个答案: