Is there really no way to use hyphens and text-transform at the same time?

Question

p {
  width: 50px;
  border: 1px dashed #555;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
 }
 .uppercase {
  text-transform: uppercase;
 }

<p lang="en">A conversation about sustainable carsharing.</p>
<p lang="en" class="uppercase">A conversation about sustainable carsharing.</p>

If I use CSS: text-transform: uppercase to convert everything to capital letters, the automatic hyphenation hyphens: auto no longer works – in Chrome (121.0..) on MacOs (14.2)

Any ideas to solve this problem? Thank you!

Here is a screenshot to illustrate this:

Answer 1

Instead of {hyphen:auto} property, you can use:

overflow-wrap: break-word;

or

word-break:break-word;

I think it should work.