css 多行文字溢出省略号

CSS是网页设计中不可或缺的一部分。其中，多行文字溢出省略号是一个常用的技巧，使得长文本能够在有限的空间内显示，同时不影响美观性。

要实现多行文字溢出省略号，需要使用一些CSS属性，包括：

overflow: hidden;
      /* 隐藏超出边界的内容 */text-overflow: ellipsis;
      /* 省略号替代超出部分 */display: -webkit-box;
      /* 将元素设置为基本的弹性盒子 */-webkit-box-orient: vertical;
      /* 设置弹性盒子方向为垂直方向 */-webkit-line-clamp: 3;
      /* 确定显示多少行的文本 */

以上属性的作用分别是：

• overflow: hidden; 能够隐藏超出边界的内容，避免造成页面混乱。
• text-overflow: ellipsis; 用省略号替代超出部分，实现多行文字省略号的效果。
• display: -webkit-box; 设置元素为基本的弹性盒子，使得文本在弹性盒子中显示。
• -webkit-box-orient: vertical; 设置弹性盒子方向为垂直方向，使得文本能够在竖直方向上自动换行。
• -webkit-line-clamp: 3; 用于确定显示多少行的文本，数字3表示可以显示三行文本。

最终的CSS样式如下：

p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
}
    

使用以上CSS样式，就可以实现多行文字溢出省略号的效果了。需要注意的是，该技巧只在Webkit浏览器下生效，其他浏览器需要使用不同的实现方式。

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