CSS多行文字截断

时间：2023-03-09 20:27:02
CSS多行文字截断

有时候容器的宽度是固定的，但要显示的文字有点多，就需要将多余的文字隐藏，而且为了表示还有字没有显示，用省略号表示。

类似这样：

CSS多行文字截断

单行文字

单行文字截断比较明显：

.truncate {
    width: 250px; /* or max-width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文字

多行文字截断就比较棘手，比如对于下面的代码段：

<div class="module">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

我们想要的效果是这样：

CSS多行文字截断

显然，没那么容易。。。。

不过针对某些浏览器有一些怪异的实现：

Webkit核心浏览器

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

不过我们不知道为毛线必须是Flexbox，还是旧版本的。。。

最后一行淡出

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
  width: 300px;
  overflow: hidden;
}

.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom:;
  right:;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

假设你的段落里设置line-height:1.2em，那就把他的容器设置为3.6em，强制设置为3行。当然宽度和overflow还是要设置的。最后一行制造一种淡出的赶脚，让用户觉得这里还有内容。。

CSS多行文字截断

Clamp.js

最后还是JS来救火了，Clamp可以实现任意行的截断。

使用也很简单：

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

写在后面：

多行截断操作性太差，感觉还不如直接计算下容易大概能容纳多少字，直接JS截断算了。

上文多行截断的资料主要摘自：

Line Clampin’ (Truncating Multiple Line Text)

相关文章