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

Question

I'm having trouble using the Tailwindstruncate class: https://tailwindcss.com/docs/text-overflow#truncate This seems to be a super smart utility, but the browser seems to do anything to not truncate the text - including super Long horizontal scrolling, this is absolutely undesirable. How can I make browsers more lenient about truncated text?

P粉545910687 · Answer

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

, 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.