文本溢出：省略号不工作

这是我试过的（见这里 ）：

body { overflow: hidden; } span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; } 

从本质上讲，当窗口变小时，我希望span使用省略号缩小。 我做错了什么？

Answer 1

你需要有CSS overflow ， width ， display和white-space 。

http://jsfiddle.net/HerrSerker/kaJ3L/1/

 span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; width: 100px; display: block; overflow: hidden } 

---

附录如果您想要进行线夹紧技术的概述（Multiline Overflow Ellipses），请看这个CSS-Tricks页面： https ： //css-tricks.com/line-clampin/

Answer 2

确保你有一个块元素，最大的大小和设置溢出隐藏。 （在IE9和FF7中testing）

http://jsfiddle.net/uh9zD/

 div { border: solid 2px blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 50px; } 

Answer 3

对于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; 

启发来自youtube 😉

Answer 4

在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; 

Answer 5

 word-wrap: break-word; 

这只是这个做了我的工作

 <pre> </pre> 

标签

否则不能做省略号….

Answer 6

将以下代码添加到您喜欢的位置

例

 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; } 

Answer 7

只是对任何人可能会偶然发现这个…我的H2是inheritance

 text-rendering: optimizelegibility; //Changed to text-rendering: none; for fix 

这是不允许省略号。 显然这是非常finickey呃？

Answer 8

您可以尝试在CSS中添加以下内容来使用省略号：

 .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

但是这个代码似乎只适用于单行修剪。 修正文本和显示省略号的更多方法可以在这个网站find： http : //blog.sanuker.com/?p=631

Answer 9

对于多行

在Chrome中，如果您需要在多行上应用省略号，则可以应用此css。

你也可以在你的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> 

Answer 10

在CSS中添加以下行以使省略号正常工作

  p { display: block; // change it as per your requirement overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }