css – BootStrap表文本省略号不能与响应Web?

前端之家收集整理的这篇文章主要介绍了css – BootStrap表文本省略号不能与响应Web?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在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省略号功能.

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

我有事业

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

所以当我调整浏览器的大小时,它需要这些选项.

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

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

编辑后选择答案.

感谢您回答我的问题!

但是我发现原因,但无法解决这个问题.

选择的答案是不相关的,但它是有帮助的.

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

即使使用响应式Web库,

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

解决方法

您必须将此所有样式应用于省略号元素.
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

猜你在找的CSS相关文章