Skip to main content
CSS is fun and cool and I like it.
Article

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

In this week's roundup, WebKit's method for truncating multi-line text gets some love, a note on calculations using custom properties, and a new OpenType feature that prevents typographic logjams.
Almanac

line-clamp

The line-clamp property truncates text at a specific number of lines.

The spec for it is currently an Editor’s Draft, so that means nothing here is set in stone because it’s a work in progress. That said, it’s defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation.… Read article “line-clamp”

Article

Line Clampin’ (Truncating Multiple Line Text)

You want X lines of text. Anything after that, gracefully cut off. That’s “line clamping” and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.

There are a couple of ways to get it done, none of them spectacular.… Read article “Line Clampin’ (Truncating Multiple Line Text)”

Snippet

Truncate String with Ellipsis

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

See the Pen Basic Overflow Ellipsis by Chris Coyier (@chriscoyier) on CodePen.

Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox:

See … Read article “Truncate String with Ellipsis”