Menu
The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. If we then set the width of the text to one em , the word will break by each letter: HTML.
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With