css设置超出显示省略号可分两种情况

• 单行文本溢出显示省略号…
• 多行文本溢出显示省略号…

但使用的核心代码是一样的：需要先使用overflow:hidden;来把超出的部分隐藏， 接着使用text-overflow:ellipsis;当文本超出时显示为省略号。

一、单行文本超出部分显示省略号

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

二、多行文本超出部分显示省略号

.two-line{ overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; -moz-box-orient:vertical; word-break: break-all; }

可以使用CSS的text-overflow和ellipsis属性来实现文本超过2行时显示省略号。

设置文本溢出隐藏

使用CSS的overflow属性来将文本溢出部分隐藏，同时使用white-space属性来设置文本换行方式为nor l或者nowrap。

使用CSS的text-overflow属性来设置文本超过2行后显示省略号。同时，需要设置宽度和高度来控制文本显示的区域。

.ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* 设置宽度和高度 */ width: 200px; height: 40px; }

上述代码中，-webkit-line-clamp属性设置为2表明最多显示2行文本，-webkit-box-orient属性设置为vertical表明文本垂直排列。注意这里使用了CSS3的属性，需要在不同浏览器中加上不同的前缀。