为什么CSS省略号在表格单元中工作？

考虑下面的例子:( 现场演示在这里 ）

HTML：

<table> <tbody> <tr><td>Hello Stack Overflow</td></tr> </tbody> </table> 

CSS：

 td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

JS：

 $(function() { console.log("width = " + $("td").width()); }); 

输出是： width = 139 ，省略号不出现。

我在这里错过了什么？

Answer 1

显然，增加：

 td { display: block; /* or inline-block */ } 

也解决了这个问题。

---

另一个可能的解决scheme是设置table-layout: fixed; 为表，并设置它的width 。 例如： http : //jsfiddle.net/fd3Zx/5/

Answer 2

这也是重要的

 table-layout:fixed; 

在包含的表格中，所以它在IE9中运行良好（如果您使用最大宽度）。

Answer 3

如前所述，你可以使用td { display: block; } td { display: block; }但是这会破坏使用表格的目的。

你可以使用table { table-layout: fixed; } table { table-layout: fixed; }但也许你希望它的行为有些colums不同。

所以实现你想要的最好的方法是把你的文本包装在一个<div>并将你的CSS应用到<div> （而不是<td> ），如下所示：

 td { border: 1px solid black; } td > div { width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

Answer 4

尝试使用最大宽度 。

Answer 5

演示页面

对于具有dynamic宽度的表格，我发现下面的方法可以产生令人满意的结果。 每个希望具有修剪文本能力的<th>都应该有一个内部包装元素，它包装允许text-overflow的内容工作。

然后，真正的技巧是以vw单位设置max-width （在<th> ）。

这将有效地导致元素的宽度“绑定”到视口宽度（浏览器窗口），并将导致响应内容剪辑。 将vw单位设置为所需的满意值。

最小的CSS：

 th{ max-width:10vw; } th > .wrap{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } 

---

这是一个可运行的演示：

 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> 

Answer 6

只是提供一个替代scheme，因为我有这个问题，没有其他答案在这里有我想要的效果。 所以我使用了一个列表。 现在在语义上，我输出的信息可以被看作是表格数据，也可以是列出的数据。

所以最后我做的是：

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

所以基本上ul是table ， li是tr ， span是td 。

然后在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; } 

然后你所做的就是设置你的跨度的max-widths ，这将给列表一个表的外观。

Answer 7

我没有使用省略号来解决文本溢出的问题，而是发现禁用和样式化的input看起来更好，并且仍然允许用户在需要时查看和select整个string。

 <input disabled='disabled' style="border: 0; padding: 0; margin: 0" /> 

它看起来像一个文本字段，但突出显示，使更多的用户友好

Answer 8

检查你的td元素的box-sizing css属性。 我有问题与CSS模板将其设置为border-box值。 您需要设置box-sizing: content-box 。

Answer 9

如果你不想设置最大宽度为TD（如在这个答案 ），你可以设置最大宽度为DIV：

 function so_hack(){} 

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

 function so_hack(){} 

注意：100％不起作用，但99％在FF中诀窍。 其他现代浏览器不需要愚蠢的div黑客。

 td {
  边框：1px纯黑色;
    填充左：5px的;
    填充右：5像素;
 }
 TD> DIV {
    最大宽度：99％;
    溢出：隐藏;
    文本溢出：省略号;
    白色空间：nowrap;

 }