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

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

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

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

多行

在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中添加以下行以使省略号起作用

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

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

例

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

word-wrap: break-word;

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

<pre> </pre> 

标签

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

您需要具有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/

Addendum2 (May 2019)
As this link claims, Firefox 68 will support -webkit-line-clamp (!)

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

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

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

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

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

http://jsfiddle.net/uh9zD/

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