Why does the word wrap on firefox but not in chrome?
If you open this link in firefox, the text wraps, why? It doesnt happen on chrome
https://play.tailwindcss.com/KBSFCQXRbi
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
3 Replies
Hmm.. this is a peculiar one.
I have a THEORY:
Firefox handles the sizing for 'text as flex children' differently from Chrome.
From the little tests I did, Firefox measures the
content size based on the 1rem measurement (16px), so once the text size goes beyond that, it breaks. But this is only when the image is a direct sibling of the texts and is set to fill the space available (width & height)
For instance, a SOLUTION to this issue could be to set the width of the <img /> to fit its content also (w-fit). It works since its not filling all the space and messing up the calculations done by Firefox.
Another solution is to put the text into a tag; maybe a <span /> and make sure its content doesn't wrap (whitespace-nowrap)
This would keep it consistent across both browsersHow did you came up with the theory? @EIO
Well, if you put all the texts into tags, it reacts differently