It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
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”
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)”
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:
