css显示两行 css显示两行超出部分省略号

CSS显示两行的方法

在网页设计中，我们经常需要控制文本的显示方式，包括字体、颜色、大小等，控制文本的行数也是一个重要的需求，我们需要让文本在一个固定宽度的容器中显示两行，而不是默认的单行或者多行，如何在CSS中实现这个效果呢？本文将介绍几种常用的方法。

1、使用display: -webkit-box;和-webkit-line-clamp属性

这种方法是利用了WebKit浏览器（如Chrome和Safari）的一个私有属性-webkit-line-clamp，这个属性可以限制一个块级元素显示的文本行数，我们可以设置-webkit-line-clamp: 2;来让文本显示两行。

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

需要注意的是，这种方法只能在WebKit浏览器中使用，对于其他浏览器（如Firefox和IE），我们需要使用其他方法。

2、使用word-wrap和overflow属性

这种方法是通过设置word-wrap: break-word;和overflow: hidden;来让文本在一行内换行，通过设置height属性来限制文本的高度，从而实现显示两行的效果。

.text {
    word-wrap: break-word;
    overflow: hidden;
    height: 40px; /* 这里的数值需要根据实际的字体大小和行高来调整 */
}

这种方法的优点是兼容性好，可以在所有浏览器中使用，它的缺点是如果文本的行高不一致，可能会导致显示的行数不准确。

3、使用JavaScript动态计算行数

这种方法是通过JavaScript来计算文本的行数，然后动态地设置CSS的属性，这种方法的优点是可以精确地控制显示的行数，而且不受字体大小和行高的影响，这种方法的缺点是需要使用JavaScript，可能会增加页面的复杂性。

var text = document.querySelector('.text');
var lineHeight = parseFloat(window.getComputedStyle(text).lineHeight);
var height = lineHeight * 2; // 假设我们要显示两行
text.style.height = height + 'px';

以上就是在CSS中显示两行的几种常用方法，每种方法都有其优点和缺点，我们需要根据实际的需求和浏览器的支持情况来选择合适的方法。