break-words not working as intended

[leetcow]

break-words sets overflow-wrap: break-word;, but this does not break the line for me:

while word-break: break-word; does:

I did not set a width for the container, so the viewport width is what causes the breaking.

In tailwind there is no way to set word-break: break-word;.

maybe break-words should apply both rules?

edit: overflow-wrap: anywhere also breaks lines in my example as intended, but that rule is not available in tailwind.

basically, I would need either of these:

overflow-wrap: anywhere;
word-break: break-word;

but neither is available.

from my testing, it seems that overflow-wrap: break-word; only actually breaks words when the element itself has a width/max-width. when a parent does, or the max viewport width is reached, it does nothing.

[leetcow]

update: word-break: break-word; is deprecated - I believe overflow-wrap: anywhere has the same behavior.

so a possible solution would be allowing setting overflow-wrap: anywhere through tailwind.

although for my project I'm doing

* {
  overflow-wrap: anywhere;
}

because the default overflowing behavior doesn't seem like a better choice