css怎么限制文本行数 |css ie6 li

CSS（层叠样式表）是前端开发中非常重要的一环，大家可以使用它来美化网页的样式，其中一个常见的需求就是限制文本行数。今天就让大家来学习一下如何使用 CSS 来掌控文本的行数。 首先，大家需要使用 CSS 中的 `text-overflow`属性。这个属性可以用来控制当文本溢出时如何显示。 接下来，大家需要设置 `display` 为 `-webkit-box` 或者 `box`，以将文本显示为一个框。然后使用 `-webkit-line-clamp` 或者 `line-clamp` 来设置最大行数。这些属性可以在保持文本不溢出的情况下限制文本的显示行数。 最后，大家来看看代码示例：

p {
display: -webkit-box;    /* 将元素设为一个弹性伸缩盒子 */
-webkit-box-orient: vertical;   /* 设定元素为垂直方向 */
overflow: hidden;       /* 隐藏超出部分 */
text-overflow: ellipsis;     /* 超出部分用省略号(...)表示 */
-webkit-line-clamp: 2;       /* 限制文本显示2行 */
line-clamp: 2;
}

如上所示，大家首先将元素设为一个弹性伸缩盒子，然后设定为垂直方向，这一步是为了保证文本的行数正常。 接着，大家设置了 overflow 属性为 hidden，这样当文本溢出时会自动隐藏超出部分。同时，大家使用了 text-overflow 属性并将其设为 ellipsis，这样超出部分就会用省略号表示。 最后，大家来到了限制文本行数的核心部分：使用 `-webkit-line-clamp` 或者 `line-clamp` 来设置最大行数。在本例中，大家设置了最大行数为 2，即只显示两行文本。 此外，需要注意的是 `-webkit-line-clamp` 是 Safari/iOS 浏览器专有属性，因此为了兼容性，在移动端上大家还需要使用 line-clamp 属性。 总之，以上代码是限制文本行数的一种基础方式，可以帮助大家更好地控制文本的显示效果。