Thanks, but the code separates the title not correctly according to German spelling rules.
The solution acc. to claude.ai (2 steps):
Step 1: Add a soft hyphen character (U+00AD) to your category name at the correct break point. Go to WooCommerce → Products → Categories → Edit the category. In the name field, place your cursor where you want the hyphen to appear and press Alt + 0173 (Windows numpad). The character is invisible but the browser will break the word there when needed.
Step 2: Add this to Theme Settings → Custom CSS → Global. Change data-loop=”3″ to match the position of your category tile:
css/* Fix: Soft hyphen word-break on mobile for long category names (3rd tile) */
.wd-cat[data-loop=”3″] .wd-cat-content,
.wd-cat[data-loop=”3″] .wd-cat-header,
.wd-cat[data-loop=”3″] .wd-entities-title,
.wd-cat[data-loop=”3″] .wd-entities-title a {
display: block !important;
overflow: visible !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
word-break: normal !important;
-webkit-hyphens: manual !important;
hyphens: manual !important;
white-space: normal !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
max-height: none !important;
text-overflow: unset !important;
}
Why it works:
The key is overriding display: flex/inline-flex with display: block and setting overflow-wrap: normal instead of break-word. With break-word, the browser is allowed to break the word anywhere and ignores the soft hyphen. With normal, the browser is forced to only break at the soft hyphen position, displaying a proper hyphen character.
Hope this helps for everyone with the same issue. You can close this topic (and the old one).
.
