javascript 没有“空白：nowrap”的文本溢出省略号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17028911/
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
text-overflow ellipsis without "white-space: nowrap"?
提问by jAndy
I was wondering if there is any clever way, to achieve the css ellipsis effectwithout the need to apply white-space: nowrapalso.
我想知道是否有任何聪明的方法来实现css省略号效果而无需应用white-space: nowrap。
In other words, lets say we have a block elementof a certain height and we'd like to let it get filled up with text-content, but the ellipsisshould get applied as soon as there is no more room in horizontalplusverticaldirections.
换句话说，假设我们有一个特定高度的块元素，我们想让它充满文本内容，但是一旦水平和垂直方向没有更多空间，就应该应用省略号.
Quick example: http://jsfiddle.net/fpv9n/2/
快速示例：http: //jsfiddle.net/fpv9n/2/
Text should be like it is, but also with an ellipsisat the end. Any way to achieve that using CSS ? I would take JS solutions also into consideration.
文本应该保持原样，但末尾还带有省略号。有什么方法可以使用 CSS 实现这一目标？我也会考虑 JS 解决方案。
采纳答案by Bendoh
There is no way to do this using pure CSS. It's monstrous and sad. I've often desired this myself when you want the browser to "ellipsify" a multi-line text with possibly overflowing text whenever it spills out of the container.
使用纯 CSS 无法做到这一点。这是可怕的和悲伤的。当您希望浏览器在多行文本溢出容器时“省略”多行文本时，我自己经常希望这样做。
回答by G-Cyrillus
You can fake ellipsis with content:'...' and position:absolute;
set height within a numbers of line(add eventually vertical-padding)
http://jsfiddle.net/V3ZQH/
您可以使用 content:'...' 和 position:absolute 来伪造省略号；
在多行内设置高度（最终添加垂直填充）
http://jsfiddle.net/V3ZQH/
span {
background-color: red;
width: 100px;
/*height: 50px;*/
height:2.4em;
display: block;
overflow: hidden;
text-overflow: ellipsis;
/*white-space: nowrap; */
position:relative;
padding:0 0.5em;
}
span:after {
content:'...';
background:inherit;
position:absolute;
bottom:0;
right:0;
box-shadow:0 0 5px red
}
回答by The Surrican
I know only of ugly work arounds involving content, absolute positionings, helper elements holding the dots and padding. I think it is probably best to have your height to be an exact multitude of your line height, for example by doing so:
我只知道丑陋的解决方法，包括content绝对定位、持有点和填充的辅助元素。我认为最好让你的高度恰好是你的行高，例如这样做：
height: 2em;
font-size: 1em;
line-height: 1em;
