css 多行字符串截断

在前端开发中，经常要处理文本过长的情况，特别是在移动设备上，过长的文本会破坏页面布局，影响用户体验。这时候，我们就需要使用CSS的多行字符串截断功能来解决这个问题。

.text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
}
    

以上代码是一个常见的多行字符串截断CSS样式，它的原理是使用了CSS3新增的两个属性：-webkit-line-clamp和-webkit-box-orient，将文本容器设置成一个固定行数的盒子，再将盒子的overflow属性设置成hidden，当超出盒子高度时，多余的文本就会被截断。

-webkit-line-clamp属性设置文本行数，值为数字，表示截断后显示的行数。注意：该属性只适用于使用 -webkit-box-orient: vertical 属性的盒子。

-webkit-box-orient属性设置文本容器的方向。该属性的默认值是horizontal，表示盒子中的文本内容水平排列。当将其设置成vertical时，文本内容就会垂直排列。

需要注意的是，-webkit-line-clamp属性只在WebKit内核的浏览器中生效，因此在使用中应该针对不同的浏览器使用不同的前缀。如果需要兼容更多浏览器，也可以使用JavaScript来手动截断文本。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！