无法获取“文本溢出：省略号”上班 [英] Can't get "text-overflow: ellipsis;" to work

问题描述

我无法获取text-overflow：ellipsis;工作...
也许有人可以给一些帮助那一个： - ）

I cannot get "text-overflow: ellipsis;" to work... Maybe someone can give ma some help with that one :-)

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

http markup：

http markup:

<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等，但我看不到任何变化。注意，这不工作在任何浏览器，我检查。所以有一定我想念的东西。

I would expect "column two" to be chopped because of the td's width of 20px. I also tried different variants with divs, tds etc, but I cannot see any change. Note, that this does not work in any browser I checked. So there is certainly something I miss.

这里有数百万页的例子，浏览器差异和和。但我不能让这个工作！根据当前信息，现在所有主要浏览器都支持简单的text-overflow属性。所以我正在寻找一个纯CSS解决方案（不是xul，而不是jQuery插件），因为这应该工作。

There are millions of pages out there about examples, browser differences and and and. But I cannot get this to work ! According to current information the simple text-overflow attribute is supported in all major browsers now. So I am looking for a pure css solution (not xul, not jquery plugin), since this should work.

感谢您，
arkascha

Thanks, arkascha

推荐答案

在示例中的代码是表自动放大和忽略设置宽度20px如果有更多的内容，然后20px。
下面是一个有效的示例： http://jsfiddle.net/qKS8p/34/

The problem with the code in the example is that the tables automatically enlarge and ignore the set width of 20px if there's more content then 20px. Here's an example that works: http://jsfiddle.net/qKS8p/34/

我添加了：

span {
  display:block;
  width:inherit;
}

这篇关于无法获取“文本溢出：省略号”上班的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！