Html 为什么 CSS 省略号在表格单元格中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10372369/
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
Why doesn't CSS ellipsis work in table cell?
提问by Misha Moroshko
Consider the following example: (live demo here)
考虑以下示例：（此处为现场演示）
$(function() {
console.log("width = " + $("td").width());
});td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>The output is: width = 139, and the ellipsis doesn't appear.
输出为: width = 139，省略号不出现。
What am I missing here?
我在这里缺少什么？
采纳答案by Misha Moroshko
Apparently, adding:
显然，添加：
td {
display: block; /* or inline-block */
}
solves the problem as well.
也解决了这个问题。
Another possible solution is to set table-layout: fixed;for the table, and also set it's width. For example: http://jsfiddle.net/fd3Zx/5/
另一种可能的解决方案是table-layout: fixed;为表设置，并将其设置为width. 例如：http: //jsfiddle.net/fd3Zx/5/
回答by streetlight
It's also important to put
放置也很重要
table-layout:fixed;
Onto the containing table, so it operates well in IE9 (if your utilize max-width) as well.
在包含表上，因此它在 IE9 中也能很好地运行（如果您使用 max-width）。
回答by marcosbdm
As said before, you can use td { display: block; }but this defeats the purpose of using a table.
如前所述，您可以使用，td { display: block; }但这违背了使用表的目的。
You can use table { table-layout: fixed; }but maybe you want it to behave differently for some colums.
您可以使用，table { table-layout: fixed; }但也许您希望它对某些列有不同的行为。
So the best way to achieve what you want would be to wrap your text in a <div>and apply your CSS to the <div>(not to the <td>) like this :
因此，实现您想要的最佳方法是将您的文本包装在 a 中，<div>并将您的 CSS 应用到<div>（而不是<td>），如下所示：
td {
border: 1px solid black;
}
td > div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
回答by Ashe
Try using max-widthinstead of width, the table will still calculate the width automatically.
尝试使用max-width而不是width，表格仍会自动计算宽度。
Works even in ie11(with ie8 compatibility mode).
即使在ie11（使用 ie8 兼容模式）也能工作。
td.max-width-50 {
border: 1px solid black;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table>
<tbody>
<tr>
<td class="max-width-50">Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>回答by vsync
Demo page
演示页面
For tables with dynamic width, I found the below way to produce satisfying results. Each <th>which is wished to have trimmed-text ability should have an inner wrapping element which wraps the contents of the <th>allow text-overflowto work.
对于具有动态宽度的表格，我发现以下方法可以产生令人满意的结果。每个<th>希望具有修剪文本能力的都应该有一个内部包装元素来包装<th>允许text-overflow工作的内容。
The real trick is to set
max-width(on the<th>) invwunits.
真正的技巧是在单位
max-width上设置（在 上<th>）。vw
This will effectively cause the element's width to be "bound" to the viewport width (browser window) and will result in a responsive content clipping. Set the vwunits to a satisfying value needed.
这将有效地导致元素的宽度“绑定”到视口宽度（浏览器窗口），并将导致响应内容剪辑。将vw单位设置为所需的令人满意的值。
Minimal CSS:
最小的 CSS：
th{ max-width:10vw; }
th > .wrap{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Here's a runnable demo:
这是一个可运行的演示：
table {
font: 18px Arial;
width: 40%;
margin: 1em auto;
color: #333;
border: 1px solid rgba(153, 153, 153, 0.4);
}
table td, table th {
text-align: left;
padding: 1.2em 20px;
white-space: nowrap;
border-left: 1px solid rgba(153, 153, 153, 0.4);
}
table td:first-child, table th:first-child {
border-left: 0;
}
table th {
border-bottom: 1px solid rgba(153, 153, 153, 0.4);
font-weight: 400;
text-transform: uppercase;
max-width: 10vw;
}
table th > .wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}<table>
<thead>
<tr>
<th>
<div class="wrap" title="Some long title">Some long title</div>
</th>
<th>
<div class="wrap">Short</div>
</th>
<th>
<div class="wrap">medium one</div>
</th>
<th>
<div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>very long text here</td>
</tr>
</tbody>
</table>回答by diggersworld
Just offering an alternative as I had this problem and none of the other answers here had the desired effect I wanted. So instead I used a list. Now semantically the information I was outputting could have been regarded as both tabular data but also listed data.
只是提供了一个替代方案，因为我遇到了这个问题，这里的其他答案都没有达到我想要的效果。所以我使用了一个列表。现在从语义上讲，我输出的信息既可以被视为表格数据，也可以被视为列表数据。
So in the end what I did was:
所以最后我做的是：
<ul>
<li class="group">
<span class="title">...</span>
<span class="description">...</span>
<span class="mp3-player">...</span>
<span class="download">...</span>
<span class="shortlist">...</span>
</li>
<!-- looped <li> -->
</ul>
So basically ulis table, liis tr, and spanis td.
所以基本上ul是table，li是tr，span是td。
Then in CSS I set the spanelements to be display:block;and float:left;(I prefer that combination to inline-blockas it'll work in older versions of IE, to clear the float effect see: http://css-tricks.com/snippets/css/clear-fix/) and to also have the ellipses:
然后在 CSS 中，我将span元素设置为display:block;和float:left;（我更喜欢这种组合，inline-block因为它可以在旧版本的 IE 中工作，以清除浮动效果，请参阅：http: //css-tricks.com/snippets/css/clear- fix/) 并且还有省略号：
span {
display: block;
float: left;
width: 100%;
// truncate when long
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Then all you do is set the max-widthsof your spans and that'll give the list an appearance of a table.
然后你要做的就是设置max-widths你的跨度，这会给列表一个表格的外观。
回答by David Slavík
Check box-sizingcss property of your tdelements. I had problem with css template which sets it to border-boxvalue. You need set box-sizing: content-box.
检查元素的box-sizingcss 属性td。我在将其设置为border-box值的css 模板方面遇到了问题。你需要设置box-sizing: content-box。
回答by craigsnyders
Instead of using ellipsis to solve the problem of overflowing text, I found that a disabled and styled input looked better and still allows the user to view and select the entire string if they need to.
我没有使用省略号来解决文本溢出的问题，而是发现禁用和样式化的输入看起来更好，并且仍然允许用户在需要时查看和选择整个字符串。
<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />
It looks like a text field but is highlight-able so more user friendly
它看起来像一个文本字段，但可以突出显示，因此更加用户友好
回答by Jeff Sieffert
Leave your tables as they are. Just wrap the content inside the TD's with a span that has the truncation CSS applied.
让你的桌子保持原样。只需使用应用了截断 CSS 的跨度将内容包装在 TD 内。
/* CSS */
.truncate {
width: 50px; /*your fixed width */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* this fixes your issue */
}
<!-- HTML -->
<table>
<tbody>
<tr>
<td>
<span class="truncate">
Table data to be truncated if it's too long.
</span>
</td>
</tr>
</tbody>
</table>
回答by Timo K?hk?nen
If you don't want to set max-width to td (like in this answer), you can set max-width to div:
如果您不想将 max-width 设置为 td （就像在这个答案中一样），您可以将 max-width 设置为 div：
function so_hack(){}
function so_hack(){}http://jsfiddle.net/fd3Zx/754/function so_hack(){}
function so_hack(){}http://jsfiddle.net/fd3Zx/754/function so_hack(){}
function so_hack(){}
Note: 100% doesn't work, but 99% does the trick in FF. Other modern browsers doesn't need silly div hacks.
注意：100% 不起作用，但 99% 在 FF 中起作用。其他现代浏览器不需要愚蠢的 div hack。
td {
border: 1px solid black;
padding-left:5px;
padding-right:5px;
}
td>div{
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
