Truncate the content of an element

Written byPhuoc Nguyen

Created

02 Oct, 2023

#CSS text truncation

Do you ever want to limit the amount of text displayed on your website or app? There's a handy CSS trick that can help: text truncation. With the `text-overflow` property, you can replace overflowing text with an ellipsis (...). But, there's a catch: it only works if you set `white-space` to `nowrap` and `overflow` to `hidden`, `scroll`, or `auto`.

Here's an example of how to use CSS to truncate text:

css

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

#Adding the title attribute

But when text overflows its container, it gets cut off and replaced with an ellipsis, leaving users in the dark about what was truncated. To solve this issue, we can add the `title` attribute to the element. This attribute provides users with additional information about the content that was cut off. By hovering over the truncated element, users can view its full content in a tooltip.

To add the `title` attribute, you can simply include it in the HTML tag and set its value equal to the full content of the element.

html

<div class="truncate" title="This is some long text that is being truncated with CSS">
    This is some long text that is being truncated with CSS
</div>

Now, when a user hovers over the truncated element, they will see a tooltip displaying the full content of the element. This can greatly improve user experience, especially when dealing with lengthy or important content.

#Setting the title dynamically

When we have content that's fully visible, we don't need to repeat ourselves by showing the same information in both the title and the content.

But here's the good news: we can use the ResizeObserver API to change the title dynamically. This API is available in modern browsers and lets us keep track of any changes to an element's size.

All we need to do is create a new `ResizeObserver` instance, pass in a callback function, and we're good to go. This function will be called whenever there are changes to the size of the tracked element.

In the callback function, we first check if the element's current width is less than its scroll width. If it is, it means the content is truncated and we need to show the full content as a tooltip when the user hovers over the element. We do this by setting the `title` attribute to the `innerText` property of the element.

On the other hand, if the current width of the element is greater than or equal to its scroll width, it means that no truncation has occurred. Therefore, we can remove any existing title attribute for that element.

To put this approach into action, here's an example of how we could implement it.

const ele = document.getElementById('element');
const ro = new ResizeObserver(() => {
    ele.offsetWidth < ele.scrollWidth)
        ? ele.setAttribute('title', ele.innerText)
        : ele.removeAttribute('title');
});
ro.observe(ele);

This approach ensures that users have all the information they need, while still benefiting from truncated elements when it makes sense.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn