Bootstrap - Text Truncation

Ethan D. -

Implementing Text Truncation in Bootstrap

Bootstrap's Text Truncation Classes

Bootstrap provides a class called .text-truncate that allows you to truncate text within an element. The .text-truncate class works by applying the following CSS properties to the element:

Example: Text truncate CSS class

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

These properties work together to truncate the text and display an ellipsis (...) when the text exceeds the width of its container. The .text-truncate class can be applied to inline elements, block-level elements, and flex containers.

Truncating Single Line Text

To truncate a single line of text using Bootstrap, apply the .text-truncate class to the element containing the text.

Example: Truncating single line text

<div class="container">
  <p class="text-truncate">This is a long paragraph of text that will be truncated if it exceeds the width of its container.</p>
</div>

Truncating Multi-line Text

Truncating multi-line text is a bit more challenging because the .text-truncate class only works for single-line text. To truncate multiple lines of text, you need to use additional CSS properties.

One approach is to use the -webkit-line-clamp property, which is supported by some browsers.

Example: Truncating multi-line text

<div class="container">
  <p class="multi-line-truncate">
    This is a long paragraph of text that spans multiple lines. It will be truncated to a specific number of lines using the -webkit-line-clamp property. The rest of the text will be hidden, and an ellipsis will be displayed at the end.
  </p>
</div>
.multi-line-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Tip: Browser support

Please note that the -webkit-line-clamp property is not supported by all browsers, so you may need to use alternative techniques or fallback options for broader browser support.

Customizing Text Truncation

Truncation with Custom CSS

Along with using Bootstrap's .text-truncate class, you can customize text truncation using CSS properties like line-clamp. The line-clamp property lets you set the maximum number of lines to show before truncating the text.

Example: Custom Truncation with CSS

<div class="container">
  <p class="custom-truncate">
    This is a long paragraph of text that will be truncated to a specific number of lines using the line-clamp property. The rest of the text will be hidden, and an ellipsis will be displayed at the end.
  </p>
</div>
.custom-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Note that the line-clamp property is currently supported by WebKit-based browsers (e.g., Chrome, Safari) and has limited support in other browsers. For wider browser compatibility, you may need to use other techniques or fallback options.

Truncation with JavaScript

Sometimes, you may need to truncate text dynamically based on certain conditions or user interactions. This is where JavaScript comes in. JavaScript lets you change the text content and apply truncation based on your specific needs.

Example: Truncation with JavaScript

<div class="container">
  <p class="js-truncate">
    This is a long paragraph of text that will be truncated dynamically using JavaScript. The JavaScript code will determine the maximum height of the container and truncate the text accordingly, adding an ellipsis at the end.
  </p>
</div>
const truncateElement = document.querySelector('.js-truncate');
const maxHeight = 100; // Set the maximum height in pixels

if (truncateElement.offsetHeight > maxHeight) {
  let text = truncateElement.textContent;
  let truncatedText = '';

  while (truncateElement.offsetHeight > maxHeight) {
    text = text.slice(0, -1);
    truncateElement.textContent = text + '...';
    truncatedText = truncateElement.textContent;
  }

  truncateElement.textContent = truncatedText;
}

This approach gives you more control over the truncation process and lets you change the behavior based on your specific needs. You can modify the JavaScript code to handle different scenarios, such as truncating based on a specific number of characters or responding to user events.