CSS BootStrap Table 文本省略号不能与响应式 Web 一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26008892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BootStrap Table text ellipsis can not be with responsive web?
提问by Juneyoung Oh
I am trying to implement String ellipsis in the Table tag.
我正在尝试在 Table 标签中实现字符串省略号。
The source code is below.
源代码如下。
<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>
This code works and if String is too long it shows ...what I expected.
这段代码有效，如果 String 太长，它会显示...我的预期。
However, when I test responsive it becomes ugly.
但是，当我测试响应时，它变得丑陋。
I wrote following part to express item registration date.
我写了以下部分来表示项目注册日期。
But when browser shrinks, its back part does not showed up in screen.
但是当浏览器缩小时，它的后面部分没有出现在屏幕上。
<td class='text-center' style="width: 20%;">
${item.regDate}
</td>
How can I use ellipsis in Bootstrap in all browser?
如何在所有浏览器的 Bootstrap 中使用省略号？
So it appears like this way
所以它看起来像这样
What I expected(when shrink browser) >>
我所期望的（缩小浏览器时）>>
column 1 / column 2
第 1 列 / 第 2 列
AAAA.... / 2014-09-24
AAAA.... / 2014-09-24
What now looks like >>
现在的样子>>
column 1 / column 2
第 1 列 / 第 2 列
AAAA.... / 2014-09
AAAA.... / 2014-09
The problem is >>
问题是>>
Before I add String ellipsis function it works responsive.
在我添加字符串省略号函数之前，它可以响应。
My guess >>
我的猜测>>
Maybe table-layout: fixed;style is the cause. but do not know how to implements String ellipsis function without table-layout.
也许table-layout: fixed;风格是原因。但不知道如何在没有table-layout.
I hope it becomes more clear than I asked first :D
我希望它比我首先问的更清楚：D
I have got the cause
我有原因
The problem is width : 80%, width: 20%, table-layout:fixed.
问题是宽度：80%，width: 20%，table-layout:fixed。
So when I resize the browser it takes these options for it.
所以当我调整浏览器的大小时，它需要这些选项。
But I still do not know how to replace it.
但我仍然不知道如何更换它。
All of these are in a div which is small part of the web site and I want responsive web.
所有这些都在一个 div 中，它是网站的一小部分，我想要响应式网络。
Edited after choose an answer.
选择答案后编辑。
Thanks for answering my question!
谢谢回答我的问题！
However I found the cause, but could not fix this.
但是我找到了原因，但无法解决这个问题。
The chosen answer was not relevant, however it was helpful.
选择的答案不相关，但很有帮助。
My problem was not by bootstrap, but width.
我的问题不是引导，而是宽度。
Even though using responsive web library,
即使使用响应式网络库，
can not be responsive if you use width with %or pxproperties.
如果您使用 width 和%或px属性，则无法响应。
回答by Darshak Shekhda
you have to apply this all style for ellipsis element.
您必须为省略号元素应用所有样式。
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Fabian
Thanks to this post, found a half-working solution without needing a fixed table, so plenty responsive. I've tested it on FF 43, Opera 34 and Chrome 47):
感谢这篇文章，找到了一个不需要固定表的半工作解决方案，所以反应灵敏。我已经在 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;
}
However, if some data is already present in cell, it will jump to next line...
但是，如果单元格中已经存在某些数据，它将跳到下一行...
回答by Martin Kearn
If you are using bootstrap you can use the text-nowrapclass with just two these style properties style="overflow: hidden;text-overflow: ellipsis;"
如果您使用的是引导程序，您可以使用text-nowrap只有两个这些样式属性的类style="overflow: hidden;text-overflow: ellipsis;"
Full example:
完整示例：
<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">
<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">
回答by Martin Kearn
The 20% is a suggestion, table layout will ignore it. Place a div with an appropriate width (or max width) inside the table cell, and place the text inside that div.
20% 是一个建议，表格布局将忽略它。在表格单元格内放置一个具有适当宽度（或最大宽度）的 div，并将文本放在该 div 内。
