line-clamp

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

line-clamp 属性会在特定行数处截断文本。

它的规范目前是编辑草案,这意味着这里没有任何东西是确定的,因为它仍在进行中。 也就是说,它被定义为 max-linesblock-overflow 的简写,前者被认为在候选推荐中可能被删除。

很容易理解为什么 max-lines 会被取消,因为它(设置截断前行的行数)的功能已经包含在 line-clamp 中,任何进一步的抽象都可能是多余的。 但这让我们偏离了主题,所以我们继续前进。

语法

.module {
  line-clamp: [none | <integer>];
}

line-clamp 接受规范当前草案中的以下值

  • none: 不设置行数的最大值,因此不会发生任何截断。
  • <integer>: 设置截断内容前的最大行数,然后在最后一行末尾显示省略号(…)。

省略号应该渲染为 Unicode 字符(U+2026),但可以根据所用用户代理的内容语言和书写模式进行替换。

嘿,我不能用 text-overflow 来做这个吗?

合理的问题,我的朋友,答案是,嗯……

(看看我做了什么?)

……有点像

text-overflow 确实有一个 ellipsis 值会截断文本

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔 text-overflow

不错不错,这是一个好的开始。 但是,如果我们想在第一行而不是某个地方,比如说第三行文本上引入省略号怎么办?

这就是 line-clamp 的用武之地。 只要注意,需要使用三个属性的组合才能实现它

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

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔 line-clamp (-webkit)

Firefox 现在支持它,完全按照这种方式(带有 -webkit- 前缀以及所有内容)。

所以,有什么问题呢?

截至目前,它是浏览器支持。 行夹紧是 CSS 溢出模块级别 3 的一部分,该模块目前处于编辑草案阶段,并且目前完全不受支持。

我们可以使用 -webkit- 前缀(奇怪的是,它在所有主要浏览器中都有效)来获得一些行夹紧操作。 事实上,上面的演示就是这样完成的。

如果我们愿意,可以走 JavaScript 路线。 Clamp.js 会奏效

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔 line-clamp (clamp.js)

浏览器支持

这是对 WebKit 专有且未记录的行夹紧实现的支持。

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
14*68*175*

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
127*127*2.3*5.0-5.1*

其他资源