【问题标题】：text-overflow as ellipsis not working文本溢出作为省略号不起作用
【发布时间】：2012-03-29 12:02:34
【问题描述】：

我有一个从 MySQL 动态填充的表。该表已应用以下 CSS

.table th,
.table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我也有一个定义的宽度：

<td style="width: 100px">Some Stationers &amp; Printers , Yamunanagar</td>

我希望它看起来像 Some Stationers &amp; Pr... 我不知道我在这里做错了什么，任何建议将不胜感激！

已经测试过的浏览器是 Safari 和 Chrome，所以只是 webkit！

【问题讨论】：

@RokoC.Buljan 不，从 7.0 开始，FF 支持 text-overflow:ellipsis。
@Boldewyn 是的，但看起来我们的朋友没有使用现代浏览器...jsbin.com/udaquq/edit#javascript,html,live（工作演示）
@RokoC.Buljan：检查更新的问题
@RokoC.Buljan：你在那个演示中添加了display: block 到td..
@RokoC.Buljan，还没有，但添加后，我在左边得到了一些我不想要的空白。

标签： html css

【解决方案1】：

text-overflow 仅适用于块元素（也就是带有display: block 的元素）。

您必须将内容包装在您的<td>s 中才能使属性生效，如下所示：

<td>
  <div style="text-overflow: ellipsis; overflow: hidden">
    Some Stationers &amp; Printers , Yamunanagar
  </div>
</td>

（如果您无法触摸标记，则可以使用 JS 自动执行此操作。）

【讨论】：

谢谢，顺便说一句，也可以将display: block 样式添加到td，这样你就不需要那个包装器了。

【解决方案2】：

Demo

.table th,  
.table td {
  background:#eee;
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float:left;        // added
}

【讨论】：

【解决方案3】：

你好，你只需在你的 td css 中添加 display:block

css

table th,
table td span{
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border: 1px solid green;
  white-space: nowrap;
  float:left;
  text-overflow: ellipsis;
    width:100px;
    overflow:hidden;
}

HTML

<table><tr>
    <td><span>Some Stationers &amp; Printers , Yamunanagar</span></td></tr></table>

和live demo here

http://jsfiddle.net/rohitazad/PAJzK/24/

【讨论】：

display: block on td 是个坏主意。表格功能将丢失。
另外，通过使用display:block，它会在给定的演示中在右侧留下很多空白！
@thirtydot 你在想什么：display:inline-block;
@azad 如果你依赖于边框间距之类的东西？
现在您可以在 td ex 中定义 span 标签。 jsfiddle.net/rohitazad/PAJzK/24