Html 文本溢出：省略号不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7993067/
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 not working
提问by Randomblue
回答by yunzen
You need to have CSS overflow, width(or max-width), display, and white-space.
您需要拥有 CSS overflow、width（或max-width）display、 和white-space。
http://jsfiddle.net/HerrSerker/kaJ3L/1/
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
AddendumIf you want an overview of techniques to do line clamping (Multiline Overflow Ellipses), look at this CSS-Tricks page: https://css-tricks.com/line-clampin/
附录如果您想了解进行线钳位（多线溢出椭圆）的技术概述，请查看此 CSS-Tricks 页面：https: //css-tricks.com/line-clampin/
Addendum2(May 2019)
As this linkclaims, Firefox 68 will support -webkit-line-clamp(!)
附录 2（2019 年 5 月）正
如此链接声称的那样，Firefox 68 将支持-webkit-line-clamp(!)
回答by ZippyV
Make sure you have a block element, a maximum size and set overflow to hidden. (Tested in IE9 and FF 7)
确保你有一个块元素、一个最大大小并将溢出设置为隐藏。（在 IE9 和 FF 7 中测试）
div {
border: solid 2px blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
}
回答by Arraxas
For multi-lines in Chrome use :
对于 Chrome 中的多行使用：
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;
Inspired from youtube ;-)
灵感来自 youtube ;-)
回答by Joel
I was having an issue with ellipsis under chrome. Turning on white-space: nowrap seemed to fix it.
我在 chrome 下遇到省略号的问题。打开空白： nowrap 似乎修复了它。
max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;
回答by aimiliano
word-wrap: break-word;
this and only this did the job for me for a
这个并且只有这个为我完成了工作
<pre> </pre>
tag
标签
everthing else failed to do the ellipsis....
其他一切都没有做省略号....
回答by Ben Racicot
Just a headsup for anyone who may stumble across this... My h2 was inheriting
对于可能偶然发现此问题的任何人来说，这只是一个提示......我的 h2 正在继承
text-rendering: optimizelegibility;
//Changed to text-rendering: none; for fix
which was not allowing ellipsis. Apparently this is very finickey eh?
这不允许省略号。显然这是非常挑剔的吧？
回答by Sathish
Add this below code for where you likes to
在您喜欢的地方添加以下代码
example
例子
p{
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Raman Sahasi
For multiple lines
对于多行
In chrome, you can apply this css if you need to apply ellipsis on multiple lines.
在 chrome 中，如果您需要在多行上应用省略号，则可以应用此 css。
You can also add widthin your css to specify element of certain width:
您还可以在 css 中添加宽度以指定特定宽度的元素：
.multi-line-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>回答by Roy
You may try using ellipsis by adding the following in CSS:
您可以尝试通过在 CSS 中添加以下内容来使用省略号：
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
But it seems like this code just applies to one-line trim. More ways to trim text and show ellipsis can be found in this website: http://blog.sanuker.com/?p=631
但似乎这段代码只适用于单行修剪。可以在此网站中找到更多修剪文本和显示省略号的方法：http: //blog.sanuker.com/?p=631
回答by Manoj Selvin
Add the Following lines in CSS for ellipsis to work
在 CSS 中添加以下行以使用省略号
p {
display: block; // change it as per your requirement
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
