[分享]css两行文字溢出变省略号

在编写网页时，难免会遇到文字内容过多而导致页面布局错乱的情况。为了解决这个问题，我们可以使用CSS来实现让两行文字溢出时变成省略号。 / 设置最大宽度为200px，当文字内容超过两行时使用省略号来代替...

在编写网页时，难免会遇到文字内容过多而导致页面布局错乱的情况。为了解决这个问题，我们可以使用CSS来实现让两行文字溢出时变成省略号。

/* 设置最大宽度为200px，当文字内容超过两行时使用省略号来代替 */
p {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
} 

以上代码使用了CSS的text-overflow属性来控制溢出时内容显示方式为省略号，使用display属性和-webkit-line-clamp属性来实现文字仅显示两行，并通过-webkit-box-orient属性将文字垂直排列。具体实现原理可以参考CSS的相关文档进行了解。