CSS多行文本溢出省略号|极客教程

CSS多行文本溢出省略号

在网页开发中，经常会遇到文本内容过长，但是显示区域有限的情况。这时候就需要使用CSS来处理文本的溢出显示。本文将详细介绍如何使用CSS来实现多行文本溢出显示省略号。

使用`text-overflow`属性

text-overflow属性是用来规定溢出文本的显示方式。在多行文本溢出省略号的情况下，可以与white-space和overflow属性一起使用。具体步骤如下：

设置文本溢出隐藏并且禁止换行：

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这段CSS代码将文本溢出隐藏，使用省略号代替溢出的部分，并且禁止换行。这样就可以保证文本在一行内显示并且溢出部分用省略号代替。

设置多行文本溢出省略号：

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

这段CSS代码通过使用WebKit的特性来实现多行文本溢出省略号。其中-webkit-box属性用于创建一个弹性盒子容器，-webkit-box-orient属性用于设置排列方向为垂直方向，-webkit-line-clamp属性用于设置显示的行数，超出的部分将被隐藏。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-line Ellipsis</title>
<style>
  .overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .multi-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>
</head>
<body>
<div class="overflow-ellipsis" style="width: 150px;">This is a long text which will be truncated with an ellipsis</div>
<p class="multi-line-ellipsis" style="width: 150px;">This is a long text which will be truncated with an ellipsis. This text is too long to fit in one line, so it will be truncated after two lines.</p>
</body>
</html>