css3 限定行数

在网页中，有时候我们需要限定某个文本块（比如新闻标题）的显示行数，超出部分省略号显示。在 CSS3 中可以使用 text-overflow 和 line-clamp 属性来实现这个功能。

首先，我们可以先来看一下 text-overflow 属性，它可以用于控制当文本溢出容器时的显示方式。比如说，我们可以将文本溢出的部分用省略号来代替，代码如下：

.line1 {
    white-space: nowrap;
            // 防止文本折行overflow: hidden;
               // 隐藏溢出的文本text-overflow: ellipsis;
    // 用省略号代替溢出的文本}

这样，当元素中的文本溢出容器时，就会自动显示为省略号。

接下来，如果我们想限制文本块的显示行数并且超过部分显示省略号，就需要用到 line-clamp 属性。但是，该属性目前只有 webkit 内核的浏览器支持，所以我们需要加上 -webkit- 前缀。代码如下：

.line2 {
    overflow: hidden;
               // 隐藏溢出的文本text-overflow: ellipsis;
        // 用省略号代替溢出的文本display: -webkit-box;
           // 将对象呈现为弹性伸缩盒子-webkit-box-orient: vertical;
       // 水平盒子-webkit-line-clamp: 3;
      // 显示的行数}
    

其中，我们将元素的 display 属性设置为 -webkit-box，让元素呈现为一个弹性伸缩盒子；-webkit-box-orient 属性控制弹性伸缩盒子的方向；-webkit-line-clamp 属性控制元素显示几行文本，超过部分用省略号代替。

需要注意的是，line-clamp 属性目前只有 webkit 内核的浏览器支持，而在火狐、IE 和 Edge 等浏览器中不支持，所以需要在代码中加上-vendor 前缀，例如在 Safari 浏览器中需要加上 -webkit-

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