每周新闻：截断多行文本、在自定义属性值中使用 calc()、上下文备选方案

在本周的综述中，我们将介绍 WebKit 用于截断多行文本的方法、关于使用自定义属性进行计算的说明，以及一项防止排版堵塞的新 OpenType 功能。

截断多行文本

CSS 的 -webkit-line-clamp 属性用于 截断多行文本 现在得到了广泛的支持（请参阅我的 使用指南）。如果您使用的是 Autoprefixer，请将其更新到最新版本（9.6.1）。以前的版本会删除 -webkit-box-orient: vertical，这会导致此 CSS 功能停止工作。

请注意，在这种情况下，Autoprefixer 不会为您生成任何前缀。您需要准确使用以下四个声明（所有这些都是必需的）

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* or any other integer */
}

(来自 Autoprefixer)

CSS 自定义属性值中的计算

在 CSS 中，目前无法预先计算自定义属性值（规范）。自定义属性的计算值是其指定值（替换变量后的值）；因此，calc() 表达式中的相对值不会被“绝对化”（例如，em 值不会被计算为像素值）。

:root {
  --large: calc(1em + 10px);
}

blockquote {
  font-size: var(--large);
}

可能看起来上述示例中的计算是在根元素上执行的，具体来说，相对值 1em 被计算并添加到绝对值 10px 中。在默认情况下（在根元素上 1em 等于 16px），--large 的计算值将为 26px。

但事实并非如此。--large 的计算值是其指定值 calc(1em + 10px)。此值被继承并替换为 <blockquote> 元素上的 font-size 属性的值。

blockquote {
  /* the declaration after variable substitution */
  font-size: calc(1em + 10px);
}

最后，计算被执行，相对值 1em 在 <blockquote> 元素的范围内被绝对化——而不是声明 calc() 表达式的根元素。

(来自 Tab Atkins Jr.)

上下文备选方案

“上下文备选方案”OpenType 功能确保在关闭连字时字符不会重叠或冲突。您可以在 wakamaifondue.com 上检查您的字体是否支持此功能，并通过 CSS font-variant-ligatures: contextual 声明启用它（如有必要）。

(来自 Jason Pamental)

在 webplatform.news 上宣布每日新闻

我已经开始在 webplatform.news 上发布面向 Web 开发人员的每日新闻。每天访问！