css单行文本省略 |css3人数统计数字特效

.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

首先介绍使用CSS属性实现的方法，这里使用了三个属性来实现。首先是white-space属性，它用来设置空格如何处理。这里设置为nowrap表示不换行。接下来是overflow属性，用来设置溢出内容的处理方式。这里设置为hidden表示隐藏超出内容。最后是text-overflow属性，用来设置溢出文本的显示方式。这里设置为ellipsis表示使用省略号代替超出部分。

.dot-dot-dot {
width: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

还有一种方法是使用webkit内核的flex布局，这种方法适用于移动端。设置一个固定宽度，溢出部分隐藏。然后使用-webkit-box-orient: vertical来表示垂直方向的文本溢出，使文本省略。最后使用-webkit-box-orient: vertical和-webkit-line-clamp: 2来表示文本最多显示两行，多出的部分使用省略号代替。

偶长长的一行文本

还有一种方法是使用伪元素，在元素的后面添加一个包含省略号的伪元素来代替超出部分。但是这种方法需要设置元素的宽度和它的容器的宽度是一样的，才能实现省略号显示出来。下面是示例代码：

.text-ellipsis {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-ellipsis::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding-left: 5px;
background-color: white;
}

以上就是几种实现CSS单行文本省略的方法，可以根据实际情况选择最适合自己的方法。