Demo 的

Question

我有一个从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 & Pr... 我不知道我在这里做错了什么，任何建议都将不胜感激！

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

Answer 1

text-overflow仅适用于块元素（也称为display: block）元素。

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

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

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

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

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

文本溢出为省略号不起作用

3 个答案:

Demo 的