26

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

Community
  • 1
  • 1
Adjit
  • 10,134
  • 12
  • 53
  • 98
  • You can try `word-wrap:break-word;` May or may not work for you. – NSTuttle Sep 22 '16 at 17:17
  • AFAIK breaking on spaces is hard-wired, where "spaces" includes things like zero-width spaces. Can you give an example of a string involving commas and how you would like it to break? Here's a [possibly relevant post](http://stackoverflow.com/questions/12574538/why-doesnt-break-word-work-on-a-long-string-with-commas). –  Sep 22 '16 at 17:20
  • @torazaburo added an example. There are no other zero-width spaces or anything added to it, just a simple string with commas. – Adjit Sep 22 '16 at 17:25
  • There are no more recent solutions available for this issue. – Heretic Monkey Sep 22 '16 at 17:33
  • I think the only way to go about it is using js to break it down the way you need it to. I don't think you need to worry about people not enabling js. I think 90% of the sites on the web would not work without js – Huangism Sep 22 '16 at 17:46

2 Answers2

22

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.

  • 1
    Yeah I guess. I mean truthfully, I can probably accomplish this with a one liner regex to just add a space, thinking about it now. For db string limits the product descriptions we create don't have any spaces... just commas, so if there was a nice CSS solution for it that would've been awesome. – Adjit Sep 22 '16 at 18:48
0

I will suggest split the array on commas and then use the for loop. below code snippet is for vue.js

                 <div 
                 v-for="(arrayElement) in Array"
                 :key="`Array-${arrayElement.id}`"
                 class="column">
                    {{ arrayElement.name }}
                 </div>
Arvind Mandhare
  • 51
  • 2