Closed conpat closed 1 year ago
Hey! So this is the same issue as #5446 and #10004. The property/value word-break: break-word
is deprecated which is why it's not used.
What you'll want to do is add min-w-0
to your element which fixes the problem. I've updated your Tailwind Play to showcase this: https://play.tailwindcss.com/mDicZ0rIM4
Hope that helps! ✨
Yes, word-break: break-word
is deprecated.
Why not implement word-break: normal; overflow-wrap: anywhere;
?
Thanks for the help and sorry for not finding the previous issues.
Keep up the great works!
https://github.com/tailwindlabs/tailwindcss/discussions/12127 Created a related research and discussion for this issue.
What version of Tailwind CSS are you using?
Version: 3.2.4
What build tool (or framework if it abstracts the build tool) are you using?
phoenix: 1.7.1 elixir: 1.14
~What version of Node.js are you using?~ None, because it is Elixir
What browser are you using?
Tested on:
What operating system are you using?
macOS Ventura 13.3.1 (a) (22E772610a)
Reproduction URL
https://play.tailwindcss.com/VKcENrNScV
Describe your issue
The Tailwind 'break-words' option does not work as expected in every scenario.
As seen in the example. The
break-words
option does not behave like the deprecated css optionbreak-word
(6th
span) or its successor (4th
and5th
span).I expected the
1st
span to wrap just like the3rd
(difference is thew-full
)Creating the example for this issue I figured out it is due to the
flax
wrap as seen in the2nd
span where its missing the
flex` and behaves as expected.The
4th
span uses the solution described on mdn and works wherebreak-words
doesn`t.