无法获得"文本溢出:省略号"; 上班

Question

我不能得到"文本溢出:省略号"; 工作...也许有人可以给那个人一些帮助:-)

小例子: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

Answer 1

这个小提琴对我有用:http://jsfiddle.net/wRruP/3/

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

似乎text-overflow必须在实际约束文本宽度的块上设置.<span>是一个内联元素,它没有真正的宽度,因此无法真正切断文本,当我嵌套a时<p>,它没有继承该属性.

Answer 2

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

我补充说:

span {
  display:block;
  width:inherit;
}