BootStrap表格文本省略号不能与响应式网页？

我正试图在表标记中实现字符串省略号。BootStrap表格文本省略号不能与响应式网页？

源代码如下。

<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>

此代码的工作，如果字符串太长它显示...我所期待的。

但是，当我测试响应它变得丑陋。

我写了以下部分来表示物品注册日期。

但是，当浏览器收缩时，它的后部没有出现在屏幕上。

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

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

所以它看起来像这样

我期待什么（当收缩浏览器）>>

列1 /列2

AAAA .../2014-09- 24

现在看起来像什么>>

列1 /列2

AAAA .../2014-09

问题是>>

之前我添加字符串省略号功能它的工作原理响应。

我的猜测>>

也许风格的原因。但不知道如何在没有table-layout的情况下实现String省略号功能。

我希望它变得更清晰，比我先问：d

我有事业

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

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

但我仍然不知道如何取代它。

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

选择答案后编辑。

感谢您回答我的问题！

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

选定的答案是不相关的，但它是有帮助的。

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

即使使用自适应网页库，

不能，如果你使用的宽度与%或px性能响应。

来源

2014-09-24 Juneyoung Oh

可能重复[表格单元格中的CSS文本溢出？]（http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell） – 2014-09-24 05:58:42

@torazaburo我认为这不是。谢谢 – 2014-09-24 06:31:09

您必须将这个所有样式应用于省略号元素。

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

来源

2014-09-24 05:02:30

是的。我知道。它看起来像'white-space：nowrap'属性可以用代替标签。我的问题是当它执行引导不能以响应式的方式工作。例如像'AAAAA ...（1列）/ 2014-09（2列）'的数据'2列有更多的数据像'-24'，但它在屏幕外。 – 2014-09-24 05:34:21

我认为'table-layout：fixed''是这种情况的主要原因，但不知道如何处理。无论如何谢谢你的回答。我需要编辑我的帖子更具体，以便人们可以清楚地了解 – 2014-09-24 05:35:45

好的，你接受我的答案或不？如果你满意，你可以接受它。 – 2014-09-24 06:25:30

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

来源

2014-09-24 05:49:23

我试过最大宽度，但它不起作用。我告诉我的老板，他决定忽略这一点。无论如何，如果你没有回答我的问题，我仍然不知道原因是什么。感谢您的有用答案：D – 2014-09-25 07:11:44

感谢this post，发现一个半工作的解决方案，不需要固定的桌子，所以很多响应。我已经测试了43法郎，歌剧34和Chrome 47）：

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

然而，如果一些数据是在细胞已经存在，它会跳转到下一行...

来源

2016-01-11 14:20:41 Fabian

这对我很好 - 没有问题，并使用bootstrap3。 – 2017-03-10 16:34:22

如果你是使用引导程序可以使用text-nowrap类只有两个这些样式属性style="overflow: hidden;text-overflow: ellipsis;"

完整的示例：

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

来源

2017-07-19 08:45:27

BootStrap表格文本省略号不能与响应式网页？

回答

相关问题