Limiting Text Length to N Lines Using CSS

In this tutorial, we will explore how to limit the length of text to a specified number of lines using CSS. This can be particularly useful when working with dynamic content or when trying to maintain a consistent layout across different devices and screen sizes.

To achieve this effect, we will use the line-clamp property, which is supported by most modern browsers, including Firefox 68 and later versions. The line-clamp property allows us to specify the maximum number of lines of text that should be displayed before truncating the content.

Here’s an example of how you can use the line-clamp property in your CSS code:

.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
          line-clamp: 2; 
  -webkit-box-orient: vertical;
}

In this example, the .text class is applied to an HTML element that contains the text you want to limit. The overflow property is set to hidden, which means that any content that exceeds the specified number of lines will be hidden. The -webkit-line-clamp and line-clamp properties are used to specify the maximum number of lines, and the -webkit-box-orient property is set to vertical to ensure that the text is displayed in a vertical direction.

You can also use the max-height property as a fallback for older browsers that do not support the line-clamp property. The max-height property should be set to a value that is equivalent to the height of the specified number of lines, taking into account the line height and font size of the text.

For example:

.text {
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

In this example, the max-height property is set to a value that is equivalent to two lines of text, assuming a line height of 1.8em.

Another approach is to use the ::after pseudo-element to add an ellipsis to the end of the truncated text. This can be achieved using the following CSS code:

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align: justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

This approach requires the use of a wrapper element with a class of .text and a child element with a class of .text-concat. The ::after pseudo-element is then used to add an ellipsis to the end of the truncated text.

In conclusion, limiting the length of text to a specified number of lines using CSS can be achieved using the line-clamp property or by using a combination of properties such as max-height, overflow, and text-overflow. By using these techniques, you can maintain a consistent layout across different devices and screen sizes while also improving the overall user experience.