文本溢出作为省略号不工作 [英] text-overflow as ellipsis not working

问题描述

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

I have a table which is being dynamically populated from MySQL. The table has been applied with the following 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;
}

我也有一个定义的宽度：

I also have a defined width:

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

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

I want that this to look like Some Stationers & Pr... I don't know what i am doing wrong here, any suggestions will be appreciated!

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

Browsers that this has been test on are Safari and Chrome, so just webkit!

推荐答案

演示

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
}

这篇关于文本溢出作为省略号不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！