每周新闻：自定义属性值，上下文替代的截断stumi-line文本，calc（）

本周的Web开发重点包括多行文本截断的进步，对CSS自定义属性计算的澄清以及用于平滑版式的新的Opentype功能。

CSS的多行文本截断

用于截断多行文本的-webkit-line-clamp CSS属性享有广泛的支持（请参阅我的用法指南）。如果您使用的是AutoPrefixer ，请确保已更新到版本9.6.1或更高版本。较旧的版本可能会删除-webkit-box-orient: vertical ，打破此功能。

至关重要的是，AutoPrefixer不会在此处自动添加前缀。您必须手动包含所有四个声明：

 .line-clamp {
  溢出：隐藏；
  显示：-webkit -box;
  -webkit-box-orient：垂直；
  -webkit-line-clamp：3; / *或任何整数 */
}

（通过AutoPrefixer）

了解CSS自定义属性计算

当前不可能在CSS中直接预定自定义属性值（请参阅规格）。自定义属性的计算值反映其指定的值（变量替换之后）。因此， calc()表达式中的相对值未经绝对化（例如， em值为em ）。

 ：根 {
   - 大：calc（1em 10px）;
}

blockquote {
  字体大小：var（ - 大）;
}

似乎1em是在根元素上计算的，并添加到10px中。但是， --large的计算值仍然是calc(1em 10px) 。然后将此值继承并替换为blockquote Element的font-size属性。

1em的计算和绝对化仅发生在blockquote元素的范围内，而不是定义calc()根元素。

（通过小标签Atkins Jr.）

Opentype中的上下文替代品

opentype“上下文交替”功能可防止连接时的角色重叠或碰撞。您可以在wakamaifondue.com上验证字体支持，并使用font-variant-ligatures: contextual启用（如果需要）（如果需要）。

（通过Jason Pamental）

每日网络开发新闻

对于每日Web开发人员新闻更新，请访问webplatform.news。经常回来！

以上是每周新闻：自定义属性值，上下文替代的截断stumi-line文本，calc（）的详细内容。更多信息请关注PHP中文网其他相关文章！