TailwindCSS's truncated classes are not used - causing a lot of horizontal scrolling

Question

I'm having trouble using the Tailwinds truncate class: https://tailwindcss.com/docs/text-overflow#truncate

This seems like a super smart utility, but the browser seems to do anything to not truncate the text - including super long horizontal scrolls, which is absolutely undesirable.

How to make the browser more lenient about truncated text?

Answer 1

You may want to share the html code to better understand the layout.

To correctly use truncate text in Tailwind, make sure the truncated element has the tag <p>, in some cases you may want to try setting the parent element for block , or use w-full and/or avoid flex

    
Well-Being: The Foundation of Thriving Business
    

Again, without seeing the source layout, it's hard to tell if this is the best solution, as horizontal scrolling can be avoided using many of the tools provided by Tailwind, such as grid layout, responsive layout based on screen size, width manipulation wait.