对于多行

在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 (!)

无固定宽度

对于我们这些不想使用固定宽度的人来说，它也可以使用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;

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

对于多行

在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中添加以下省略号:

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

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