你需要CSS溢出，宽度(或max-width)，显示和空白。

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

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

身体{ 溢出:隐藏; ｝ 跨度{ 边框:纯蓝色2px; 空白:nowrap;} 文本溢出:省略; 宽度:100 px; 显示:块; 隐藏溢出: ｝ <span>Test Test Test Test Test </span>

齿顶高 如果你想了解行夹紧(Multiline Overflow Ellipses)技术的概述，请查看CSS-Tricks页面:https://css-tricks.com/line-clampin/

附录2(2019年5月) 正如这个链接所声称的，Firefox 68将支持-webkit-line-clamp (!)

确保你有一个块元素，一个最大大小，并将overflow设置为hidden。(在IE9和FF 7测试)

http://jsfiddle.net/uh9zD/

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

word-wrap: break-word;

这个，只有这个对我有用 对于一个

<pre> </pre> 

tag

其他一切都没有做到省略号....

将下面的代码添加到您喜欢的地方

例子

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中使用多行:

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

只是给可能无意中发现这个的人一个提示…我的h2继承了

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

这是不允许省略的。显然这很棘手，是吧?

我有一个问题与省略下铬。打开空白: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;

你可以尝试在CSS中添加以下省略号:

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

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

对于多行

在chrome中，如果你需要在多行上应用省略号，你可以应用这个css。

你也可以在你的css中添加width来指定特定宽度的元素:

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

无固定宽度

对于我们这些不想使用固定宽度的人来说，它也可以使用display: inline-grid。因此，除了必需的属性，还需要添加显示

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

我使用:

溢出-x:剪辑只是水平折叠它 空格:避免新行 Text-overflow:使用省略号添加…在最后

overflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;

考虑到显示为伸缩它不会工作，只是改变它到一个适合你的需要。