Text truncation, using CSS

Text truncation is a tool that many designs make use of to prevent text from overflowing its container. It can be applied both to single line and multiline text, and it is a great way to ensure that the text fits within the design constraints.
https://codepen.io/chalarangelo/pen/rNEggmY
Single line text can be easily truncated using a couple of CSS fundamentals. First off, you'll need to use white-space: nowrap to prevent the text from wrapping to the next line. Then, you can use overflow: hidden to hide any overflow, and text-overflow: ellipsis to add an ellipsis at the end of the text.
> [!NOTE]
>

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

Single line text can be easily truncated using a couple of CSS fundamentals. First off, you'll need to use white-space: nowrap to prevent the text from wrapping to the next line. Then, you can use overflow: hidden to hide any overflow, and text-overflow: ellipsis to add an ellipsis at the end of the text.
> [!NOTE]
>
> For this technique to work, a fixed width must be set on the element or its parent.
<baseline-support featureId="line-clamp">
</baseline-support>

From 30-seconds-of-code: text-truncation