css 多行显示省略号

CSS多行显示省略号是一种常见的需求，尤其是在移动端的响应式设计中。下面介绍一些实现方法。

/*方法1: 使用WebKit的CSS属性*//*最新版的Firefox也支持*/display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    /*方法2: 使用CSS属性*//*需要考虑跨浏览器兼容性*/display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -ms-line-clamp: 2;
    -o-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    

以上两种方法在实现多行显示省略号的同时，会对元素的高度进行限制，这可能会导致文本内容被截断。如果需要在保证元素高度不被限制的基础上实现多行显示省略号，可以使用JavaScript来实现。

/*方法3: 使用JavaScript*/var lines = 2;
       //在这里设置要显示的行数var lineHeight = parseInt(window.getComputedStyle(document.querySelector('#target'), null).getPropertyValue('line-height'));
    var targetHeight = lines * lineHeight;
    var content = document.querySelector('#target p');
    var original = content.innerHTML;
    while (content.offsetHeight >
 targetHeight) {
      original = original.substring(0, original.length - 1);
      content.innerHTML = original + '...';
}
    

以上是CSS多行显示省略号的三种实现方法，可以根据实际情况选择适合自己的方法，在实现页面的过程中也可以根据需求进行定制。

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