无法获得“text-overflow: ellipsis”

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我无法获得“text-overflow: ellipsis”,这无法工作

小例子:http://jsfiddle.net/qKS8p/2/

http标记:

<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td width="90"><span class="prose">column one</span></td>
        <td width="20"><span class="prose">column two</span></td>
        <td width="90"><span class="prose">column three</span></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

CSS样式规则:

.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

提问于
用户回答回答于

该示例中的代码的问题是,如果有更多的内容而不是20 px,表就会自动放大并忽略设置的20 px宽度。下面是一个有用的例子:http://jsfiddle.net/qKS8p/34/

补充:

span {
  display:block;
  width:inherit;
}
用户回答回答于

HTML

<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>

​##css

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40px;
}

扫码关注云+社区