无法实现"text-overflow: ellipsis;"的效果

Question

无法实现"text-overflow: ellipsis;"的效果

ellipsiscss

16

我无法让"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，“第二列”会被截断。我还尝试了使用div、td等不同的变体，但我看不到任何变化。请注意，这在我检查的任何浏览器中都不起作用。所以肯定有我忽略的事情。

有成千上万的页面涉及示例、浏览器差异等等。但我无法让它正常工作！根据当前信息，简单的text-overflow属性现在在所有主要浏览器中得到支持。因此，我正在寻找一个纯CSS的解决方案（不是xul，不是jQuery插件），因为这应该能够正常工作。

谢谢， arkascha

- arkascha

这是一个很好的例子，展示了省略号在表格中的应用。 - InfiniteStack

3个回答

15

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

我添加了：

span {
  display:block;
  width:inherit;
}

- Mario Vlad

这个例子在Mac上的Chrome和Safari上可以运行，但在Firefox 45.0.1上不行。有人知道如何让它在Firefox上工作吗？我以为它应该被支持，根据http://caniuse.com/#search=text-overflow。 - David Whiteman

以下的代码片段展示了我正在使用的确切CSS，可以在Chrome和Safari上运行，但在Mac上的Firefox上无法运行：http://jsfiddle.net/dlwhiteman/qKS8p/368/ - David Whiteman

4

尝试在同一个块级元素（比如

）上设置text-overflow属性和固定宽度，就像这样：

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

使用原始CSS：

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

- Ilmari Karonen

谢谢，这个可以用，但是Mario Vlads下面的解决方案更精确。它改变的更少，并指出了真正的问题：span元素的宽度样式。无论如何：谢谢！ - arkascha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- millimoose · Accepted Answer

这个jsfiddle对我有效：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>是一个内联元素，没有实际宽度，因此无法真正截断文本。当我嵌套一个<p>时，它并没有继承这个属性。