[分享]css两行自动省略

CSS的两行自动省略是一项非常有用的功能，可以让文本在超出容器大小后自动省略，并在文本省略部分显示省略号。实现两行自动省略需要用到CSS的textoverflow属性和webkitlineclamp属...

CSS的两行自动省略是一项非常有用的功能，可以让文本在超出容器大小后自动省略，并在文本省略部分显示省略号。

实现两行自动省略需要用到CSS的text-overflow属性和-webkit-line-clamp属性。

 /* 兼容不同浏览器的写法 */
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制行数 */ 

其中，-webkit-line-clamp属性可以控制显示的行数，比如设置为2就表示只显示两行，超过两行的部分会被省略，同时显示出省略号。

注意，由于这是一个CSS3新增的属性，因此需要加上浏览器前缀-webkit-

值得注意的是，该属性只在webkit或者Blink内核的浏览器中生效，包括Chrome, Safari, Opera等，而在Firefox等其他浏览器中则不起作用。

总之，CSS的两行自动省略是一项很实用的功能，并且在现代的浏览器中都可以实现，可以用来美化文章或者页面，提高其美观性和可读性。