ellipsis - 无法获得“文本溢出：省略号；” 去工作

Question

我无法得到“文本溢出：省略号；” 工作...也许有人可以帮我解决这个问题:-)

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

http 标记：

<table class="" border="1">
    <tr><td colspan=3>…&lt;/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>…&lt;/td></tr>
</table>

CSS样式规则：

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

由于 td 的宽度为 20px，我预计“第二列”会被截断。我还尝试了 div、tds 等不同的变体，但我看不到任何变化。请注意，这在我检查的任何浏览器中都不起作用。所以肯定有一些我想念的东西。

那里有数百万页关于示例、浏览器差异和和和的内容。但我不能让它工作！根据目前的信息，现在所有主要浏览器都支持简单的 text-overflow 属性。所以我正在寻找一个纯 css 解决方案（不是 xul，不是 jquery 插件），因为这应该可以工作。

谢谢，阿卡沙

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 宽度，如果内容超过 20px。这是一个有效的例子：http: //jsfiddle.net/qKS8p/34/

我补充说：

span {
  display:block;
  width:inherit;
}

Answer 3

尝试text-overflow在同一个块级元素（例如 a div）上同时设置属性和固定宽度，如下所示：

<table class="" border="1">
    <tr><td colspan=3>…&lt;/td></tr>
    <tr class="">
        <td><div class="prose" style="width: 90px">column one</div></td>
        <td><div class="prose" style="width: 20px">column two</div></td>
        <td><div class="prose" style="width: 90px">column three</div></td>
    </tr>
    <tr><td colspan=3>…&lt;/td></tr>
</table>

使用您的原始 CSS：

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