How to clamp a text line to one line?

Questions
1

Hi folks!

It’s about to be 2026, and since 2017 folks have wondered, how to clamp a line of text to one line:

I am familiar with the truncate workaround, but there has to be a better way.

Has any way to do this using OOTB features? If not, is there a plugin that will do it?

Thank you.

1 Like
2

Doesn’t adding a max height to the element do that? Just make sure you calculate for line height.

1 Like
3

Not sure if there’s a better way but I set a max height limit on the element and it works well

2 Likes
Text ellipsis solution
4

I believe there is no way natively, but you can add html, add id_atributte to the text and put the following code:

#title_1line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

If you want to crash on a specific line and not just the first one, try this other code:

#title_1line{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
1 Like