常用css模板

最新推荐文章于 2024-06-03 23:30:08 发布

原创最新推荐文章于 2024-06-03 23:30:08 发布 · 301 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用CSS实现文本超出部分用省略号显示且限制显示行数的方法，通过设置overflow、text-overflow、display、-webkit-box-orient及-webkit-line-clamp属性，可以有效地控制文本在网页布局中的展示效果。

段落超出显示省略号（可单行多行）

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

解析：
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。