单行文字溢出出现省略号 css代码实现

要实现单行文字溢出出现省略号，可以使用以下CSS代码：

div {
/* 1)有宽度 */
width: 300px;
/* 2)让文本不折行 */
white-space: nowrap;
/* 3)让超出的文本隐藏 */
overflow: hidden;
/* 4)超出的文本显示成三个圆点 */
text-overflow: ellipsis;
}

其中，需要设置元素的宽度，让文本不折行，让超出的文本隐藏，以及让超出的文本显示成三个圆点。这样就可以实现单行文字溢出出现省略号的效果了。