CSS Truncate Techniques

Truncating text with CSS is a commonly used technique to fit long text into a specific area. In this article, we’ll explore the basic methods of truncating text and how to apply them in different scenarios, along with code examples.

Contents

1. Single-Line Truncate with text-overflow: ellipsis;
2. Multi-Line Truncate
3. Truncate with Flexbox for Increased Flexibility
4. Truncate in Responsive Design
5. Dynamic Truncate with JavaScript

Conclusion

1. Single-Line Truncate with text-overflow: ellipsis;

The most common method to truncate text on a single line and add an ellipsis (…) at the end is by using text-overflow: ellipsis;.

HTML

<div class="single-line">
  This is a very long text that will be truncated beyond a certain width.
</div>

CSS

.single-line {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc; /* For border visibility */
}

• white-space: nowrap;: Keeps the text on a single line.
• overflow: hidden;: Hides any text that overflows the container.
• text-overflow: ellipsis;: Adds an ellipsis (...) at the end of the truncated text.

2. Multi-Line Truncate

To truncate text after a specific number of lines, the line-clamp property can be used. This property cuts off text after a certain number of lines and adds an ellipsis.

HTML

<div class="multi-line">
  This is a very long text that will be truncated beyond a certain number of lines. The text is actually longer but needs to fit within a certain height. Therefore, it will be cut off after a few lines.
</div>

CSS

.multi-line {
  width: 200px;
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to display */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  border: 1px solid #ccc; /* For border visibility */
}

• -webkit-line-clamp: 3;: Truncates the text after three lines.
• -webkit-box-orient: vertical;: Aligns the text vertically.

3. Truncate with Flexbox for Increased Flexibility

Truncating text within a flex container is also possible.

Get Ali Baltaci’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

HTML

<div class="flex-container">
  <div class="icon">📁</div>
  <div class="text">This is a very long file name that will be truncated beyond a certain width.</div>
</div>

CSS

.flex-container {
  display: flex;
  align-items: center;
  width: 250px;
}

.icon {
  flex-shrink: 0;
  margin-right: 10px;
}

.text {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc; /* For border visibility */
}

• flex-grow: 1;: Allows the text area to expand.
• flex-shrink: 0;: Keeps the icon size fixed.
• text-overflow: ellipsis;: Adds an ellipsis (...) at the end of the truncated text.

4. Truncate in Responsive Design

In responsive design, text may need to be truncated according to screen size.

HTML

<div class="responsive-text">
  This text will be truncated according to different screen sizes.
</div>

CSS

.responsive-text {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc; /* For border visibility */
}

@media (max-width: 600px) {
  .responsive-text {
    max-width: 150px;
  }
}

• max-width: 100%;: Adjusts the text width according to the screen size.
• @media (max-width: 600px): Reduces the text area width when the screen width is less than 600px.

5. Dynamic Truncate with JavaScript

Sometimes, you may need to dynamically truncate text. In such cases, you can use JavaScript to provide a more flexible solution.

HTML

<div class="dynamic-truncate" id="dynamic">
  This text will be truncated with JavaScript.
</div>

JS

function truncateText(element, maxLength) {
  if (element.innerText.length > maxLength) {
    element.innerText = element.innerText.substring(0, maxLength) + '...';
  }
}

const element = document.getElementById('dynamic');
truncateText(element, 20);

• truncateText function: Cuts the text to a specified length and appends an ellipsis (...).
• maxLength parameter: Determines the number of characters to truncate.

Conclusion

Managing the length of text is crucial for enhancing user experience. Truncating text with CSS offers an effective solution in web design, balancing both aesthetics and functionality. Whether it’s a simple single-line truncation or a more complex multi-line truncation, CSS provides flexible and user-friendly tools.