CSS Break Word on Commas

Issue

I am trying to break a word based on commas instead of spaces

I have seen the solutions that include adding the <wbr> tag to your HTML, however, for dynamic information now I need another script to insert it into the HTML text and if the user doesn't have JS enabled it doesn't really do me much good.

As of now, I am using a combination of:

white-space: break-word;
word-break: break-all;

It works as an OK solution, however, both of these solutions I found (https://stackoverflow.com/a/15137272/1887101; break long-no-spaces-lines on commas, dots, hyphens or other special chars) are more than 3 years old - so I am wondering if there are any more recent solutions available for this issue?

Sample string:

C31C636363-Thermal,80mm, ReStick,Serial,A/C,PSIncluded,EDG

Sample break:

C31C636363-Thermal,80mm, ReStick,

Serial,A/C,PSIncluded,EDG

Solution

I am trying to break a word based on commas instead of spaces

You can't. CSS does not support that. Breaking on spaces is hard-wired.

You have no choice but to use JS to pre-process your content to perhaps insert zero-width spaces after commas, or perhaps do that on the server side.

Answered By - user663031