CSS 无法获得“文本溢出：省略号；” 上班
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9555398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't get "text-overflow: ellipsis;" to work
提问by arkascha
I cannot get "text-overflow: ellipsis;" to work... Maybe someone can give ma some help with that one :-)
我无法得到“文本溢出：省略号；” 工作......也许有人可以给我一些帮助:-)
Small example: http://jsfiddle.net/qKS8p/2/
小例子：http: //jsfiddle.net/qKS8p/2/
http markup:
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 style rules:
css样式规则：
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
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.
由于 td 的宽度为 20px，我希望“第二列”被切碎。我还尝试了 div、tds 等不同的变体，但我看不到任何变化。请注意，这在我检查过的任何浏览器中都不起作用。所以肯定有一些我想念的东西。
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 shouldwork.
有数百万页关于示例、浏览器差异和和和。但我不能让它工作！根据目前的信息，现在所有主要浏览器都支持简单的 text-overflow 属性。所以我正在寻找一个纯 css 解决方案（不是 xul，不是 jquery 插件），因为这应该可行。
Thanks, arkascha
谢谢，阿卡沙
采纳答案by Mario Vlad
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/
示例中代码的问题在于，如果内容超过 20 像素，表格会自动放大并忽略 20 像素的设置宽度。这是一个有效的例子：http: //jsfiddle.net/qKS8p/34/
I added:
我补充说：
span {
display:block;
width:inherit;
}
回答by millimoose
This fiddle works for me: http://jsfiddle.net/wRruP/3/
这个小提琴对我有用：http: //jsfiddle.net/wRruP/3/
HTML
HTML
<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>
?### CSS
?### CSS
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 40px;
}
It seems like text-overflowhas to be set on the block that's actually constraining the width of the text. <span>is an inline element that doesn't really have a width and thus can't really cut off text, and when I nested a <p>, it didn't inherit the property.
似乎text-overflow必须在实际上限制文本宽度的块上设置。<span>是一个内联元素，它没有真正的宽度，因此不能真正切断文本，当我嵌套 a 时<p>，它没有继承该属性。
回答by Ilmari Karonen
Try setting both the text-overflowproperty and the fixed width on the same block-level element (such as a div), like this:
尝试text-overflow在同一个块级元素（例如 a div）上设置属性和固定宽度，如下所示：
<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>
With your original CSS:
使用您的原始 CSS：
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
