文字溢出：省略号不起作用

这是我尝试过的（请参阅此处）：

body {
    overflow: hidden;
}

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

本质上，当窗口变小时，我希望跨度以省略号缩小。我做错什么了？

您需要具有CSS overflow，width（或max-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
}

附录 如果要概述进行线夹的技术（多线溢流椭圆），请查看以下CSS-Tricks页面：https : //css-tricks.com/line-clampin/

附录2（2019年5月）
如此链接所述，Firefox 68将支持-webkit-line-clamp（！）

确保您有一个块元素，最大大小，并将溢出设置为隐藏。（在IE9和FF 7中测试）

http://jsfiddle.net/uh9zD/

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

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

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

word-wrap: break-word;

这，只有这为我做了一份工作

<pre> </pre> 

标签

其他所有事情都没有做省略号...

对于任何可能偶然发现此问题的人来说，都是要小心...我的h2正在继承

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

这不允许省略号。显然这是很挑剔的吧？

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

例

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

多行

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

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

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

但似乎这段代码仅适用于单行修剪。可以在以下网站中找到更多剪裁文本和显示省略号的方法：http : //blog.sanuker.com/?p=631

在CSS中添加以下行以使省略号起作用

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

对于我们中不希望使用固定宽度的用户，也可以使用display: inline-grid。因此，只需添加所需的属性display

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}