CSS实现文本显示两行

要使用CSS使文本显示为两行，可以使用max-height和line-height属性。以下是一个示例：




.text-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em; /* 设置行高 */
  max-height: 3em; /* 行高的两倍，因为最多显示两行 */
  width: 200px; /* 根据需要设置宽度 */
}

HTML部分：




<div class="text-two-lines">
  这里是一些很长的文本，如果超过两行，它将被截断，并且在末尾显示省略号。
</div>

这段代码将确保文本显示为两行，如果文本更长，则会以省略号结束。注意，这种方法在某些旧浏览器中可能不兼容。

CSS实现文本显示两行

评论已关闭

推荐阅读