CSS Break Word on Commas

Question

I'm trying to break a comma based word instead of spaces

I have seen solutions that include adding the <wbr> to your HTML, however, for dynamic information, I now need another script to insert it into the HTML text, and if the user does not have JS, it’s not really good.

I am currently using a combination of:

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

It works as an OK solution, however, I found both of these solutions ( https://stackoverflow.com/a/166778/) ; break long-no-spaces-lines by commas, periods, hyphens, or other special characters ) for more than 3 years - so I am wondering if there are more recent solutions to this problem?

Example line:

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

Sample Break:

C31C636363-Thermal, 80 mm, ReStick,

Serial, A / C, PSIncluded, EDG

Answer 1

I'm trying to break a comma based word instead of spaces

You can not. CSS does not support this. Breaking in spaces is difficult.

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