Weekly news: Truncating muti-line text, calc() in custom property values, Contextual Alternates

This week's web development highlights include advancements in multi-line text truncation, clarifications on CSS custom property calculations, and a new OpenType feature for smoother typography.

Multi-line Text Truncation with CSS

The -webkit-line-clamp CSS property for truncating multi-line text enjoys widespread support (see my usage guide). If you're using Autoprefixer, ensure you've updated to version 9.6.1 or later. Older versions might remove -webkit-box-orient: vertical, breaking this functionality.

Crucially, Autoprefixer doesn't automatically add prefixes here. You must manually include all four declarations:

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

(via Autoprefixer)

Understanding CSS Custom Property Calculations

Directly pre-calculating custom property values in CSS isn't currently possible (see spec). A custom property's computed value mirrors its specified value (after variable substitution). Therefore, relative values within calc() expressions aren't absolutized (e.g., em values remain as em).

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

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

It might seem that 1em is computed on the root element and added to 10px. However, the computed value of --large remains calc(1em 10px). This value is then inherited and substituted into the blockquote element's font-size property.

The calculation and absolutization of 1em only occurs within the blockquote element's scope, not the root element where calc() is defined.

(via Tab Atkins Jr.)

Contextual Alternates in OpenType

The OpenType "Contextual Alternates" feature prevents character overlap or collisions when ligatures are disabled. You can verify font support at wakamaifondue.com and enable it (if needed) using font-variant-ligatures: contextual.

(via Jason Pamental)

Daily Web Development News

For daily web developer news updates, visit webplatform.news. Check back often!

The above is the detailed content of Weekly news: Truncating muti-line text, calc() in custom property values, Contextual Alternates. For more information, please follow other related articles on the PHP Chinese website!