Use -webkit-line-clamp to natively truncate long (multi-line) texts with an ellipsis

Note: You won't need this for single lines of text. In this case it is better to just use the text-overflow property: Use CSS "text-overflow" to truncate long texts

You can use -webkit-line-clamp in your CSS/SASS to natively render an ellipsis (...) after a specific amount of lines for a multi-line text in your HTML.
Earlier, it was necessary to implement JavaScript solutions like Superclamp.js Show archive.org snapshot to enable this because the browser support has been rather limited and worked only in Chrome. With Microsoft Edge going Chromium and Firefox finally implementing it, you may now consider using this feature in your application. It works in almost all browsers, except for Internet Explorer and Opera Mini which do not need to be supported by most web applications anyway.
See the compatibility list Show archive.org snapshot .

The premise to make the line-clamp property work is to always use the -webkit prefix as even Firefox just implemented it that way. The sole line-clamp property is currently not working in any browser. Also, the text container needs to have display: -webkit-box, which is more or less the old flexbox standard before the common Flexbox with display: flex was implemented. This also means that you will have to use deprecated properties, if you plan on applying layout to this text container. While currently all relevant browsers still support it for compatibility reasons, this may be subject to change in the future, possibly breaking your layouts. For this purpose, try to do most of the layouting logic in a surrounding container and only focus on the text. This will, however, add more HTML to your DOM structure which may be annoying.

Still, we recommend to use the CSS approach whenever possible, since Clamping in JavaScript has significant performance costs.

Usage

Copydisplay: -webkit-box
overflow: hidden
overflow-wrap: break-word
-webkit-line-clamp: <number-of-lines>
-webkit-box-orient: vertical

If you apply -webkit-line-clamp: 2, the text will show two lines and then add an ellipsis to the end, if it would actually be longer than two lines:

CopyDies ist ein Text
mit mehreren Zeilen
foo bar

would be rendered as

CopyDies ist ein Text
mit mehreren Zeilen...

I recommend building a SASS mixin for this purpose:

Copy=line-clamp($lines)
  display: -webkit-box
  overflow: hidden
  overflow-wrap: break-word
  -webkit-box-orient: vertical
  -webkit-line-clamp: $lines

• overflow: hidden is necessary because the clamping mechanism will treat additional lines as overflow which would otherwise just be shown regularly, not doing anything.
• overflow-wrap: break-word is necessary because long, unbreakable words will not automatically wrap at the end of the container (like strings with spaces in them do) and cause an overflow within their line rather than creating a new line that can be clamped. Without this option, no ellipsis would thus be rendered. See the docs Show archive.org snapshot for more information.
• -webkit-box-orient: vertical is necessary because otherwise it would create a horizontal flow for the text content(s) due to -webkit-box-orient: horizontal being the default and the line clamping mechanism will only work with vertical flow, even if the text starts wrapping within its container. This is most probably because there is no defined behavior in case multiple text contents are rendered next to each other (horizontally) and the clamping is intended to affect the whole container text, not separate children.

For example,

Copy.container
  %p Text 1
  %p Text 2
  %p Text 3

with

Copy.container
  display: -webkit-box

would be shown as

CopyText1Text2Text3

instead of

CopyText1
Text2
Text3

If you now add -webkit-box-orient: vertical and -webkit-line-clamp: 2 to .container you will get

CopyText1
Text2...

as desired.

Caveats

Building more complex layouts within the -webkit-box is very limited and also fragile due to the unknown future browser support. For example, applying margins between text paragraphs or padding inside a single text paragraph within that container will not work as expected and either do nothing or affect all items.