对于多行

在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溢出，宽度(或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;
}

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

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

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

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

例子

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