使用 CSS text-overflow 属性的解决方案
要在 CSS 溢出属性设置为“隐藏”的 HTML <span> 元素中添加省略号，我们需要添加 text-overflow 属性。
使用它的“省略号”值，这将在 <span> 内的内容末尾添加点。
在带有溢出属性的 <span> 标记中显示省略号的示例：
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: green;
}
</style>
</head>
<body>
<span>
经历过风雨，才懂得阳光的温暖。
</span>
</body>
</html>
在我们的示例中，我们将 <span> 元素的 display 属性设置为“inline-block”。
宽度指定省略号的位置。
另请注意，我们使用带有“nowrap”值的 white-space 属性不允许内容换行到下一行。
在第二行末尾的 <span> 标签中显示省略号的示例：
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: inline-block;
border: 1px solid #cccccc;
padding: 9px;
width: 150px;
height: 45px;
-webkit-line-clamp: 2;
display: -webkit-box;
line-height: 1.65;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<span>
经历过风雨，才懂得阳光的温暖。
</span>
</body>
</html>
日期：2020-06-02 22:15:08 来源：oir作者：oir