在 css 上：如果文本行中断显示点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17868503/
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
On css: if text line is break show dots
提问by OnengLar
I seen before this solution but i not remember where exactly... without JS
我以前见过这个解决方案，但我不记得具体在哪里......没有 JS
maybe it's work when line is break. But what a css property is?
也许它在断线时起作用。但是什么是 css 属性？
Question is:how to show for user: dots, if text longer than 150px
问题是：如何为用户显示：点，如果文本长度超过 150px
<div>apple</div>
<div>Hyman fruit</div>
<div>super puper long title for fruit</div>
<div>watermelon</div>
div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
}
回答by verbanicm
Are you talking about an ellipsis? Add this to your CSS
你说的是省略号吗？将此添加到您的 CSS
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Fiddle: http://jsfiddle.net/5UPRU/7/
回答by Fi Ras
In order for text-overflow: ellipsisto work you must also specify a width(or a max-width), white-space: nowrapand overflow: hidden
为了text-overflow: ellipsis工作，你还必须指定一个width（或一个max-width），white-space: nowrap和overflow: hidden
The element must be a block so make sure to use display: blockor display: inline-blockon inline elements.
该元素必须是一个块，因此请确保在内联元素上使用display: block或display: inline-block。
div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by adrift
You're looking for text-overflow: ellipsis;- you need to specify it on the <div>in addition to white-space: nowrap;and overflow: hidden;
您正在寻找text-overflow: ellipsis;-<div>除了white-space: nowrap;和overflow: hidden;
div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
text-overflow: ellipsis;
white-space: nowrap;
}
