css – 无法获取“text-overflow:ellipsis”“工作

前端之家收集整理的这篇文章主要介绍了css – 无法获取“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;
}

由于td的宽度为20px,所以我会期待“第二列”被切碎。我也尝试了不同的变种与divs,tds等,但我看不到任何改变。请注意,这在我检查的任何浏览器中都不起作用。所以有一些我想念的东西。

有几百万页的例子,浏览器的差异和和。但我不能让这个工作!根据当前的信息,所有主流浏览器都支持简单的文本溢出属性。所以我正在寻找一个纯粹的CSS解决方案(不是xul,而不是jQuery插件),因为这应该是正常的。

谢谢,
arkascha

解决方法

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

我补充说:

span {
  display:block;
  width:inherit;
}

猜你在找的CSS相关文章