CSS – ellipsis and line-clamp

前言

CSS 很早就有 build-in 方案 for 省略号 ellipsis 了. 但是只能 1 line, 遇到多行的时候只能用 JS.

后来出了 line-clamp 终于把 multiple line ellipsis 解决了.

参考:

stackoverflow – Limit text length to n lines using CSS

Can I use line-clamp

Multi-Line Truncation with the New Line Clamp Plugin — What's new in Tailwind CSS

CSS-Tricks – line-clamp

ellipsis single line

一段 paragraph

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, reiciendis!
p>

CSS Style

p {
  width: 300px; /* 限制宽度 */
  white-space: nowrap; /* 关闭自动换行 */
  overflow-x: hidden; /* 超出就隐藏 */
  text-overflow: ellipsis; /* 省略号 */
}

效果

特点:

1. 如果没有 nowrap 宽度不够的时候它会自动换行, 就不会有 overflow 了.

2. 如果没有 overflow hidden 那省略号也不会出现了.

结论就是它是通过限制宽度 (width:300px) 和高度 (nowrap) 让内容 overflow-x, 然后通过 hidden 配上 ellipsis 变成省略号的. 一套组合拳.

如果要 multiple line 就必须拿掉 nowrap 让它自动换行, 然后通过另一个手法去限制高度. 这就是 line-clamp 做的事.

line-clamp

和上面同一个例子.

p {
  width: 300px; /* 限制宽度 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制高度 */
  -webkit-box-orient: vertical;
  overflow-y: hidden; /* 超出就隐藏 */
}

去掉了  text-overflow: ellipsis; 去掉了 nowrap, 允许它自动换行.

通过 line-clamp 来限制行数 (限制高度) 加上 display: -webkit-box 和 box-orient, overflow-y 就可以了.

完全是另一套组合拳丫.

虽然现在 model browser 都支持了, 但是一定要加上 -webkit prefix 哦.

(新)CSS

相关

标签