Custom word break

Question

I am working on a map legend, and I have some problems when the word is too long. I want to know if any property can be added to the text so that it breaks into the last character space, rating, underline, slash and other punctuation marks.

In other words, I want more characters to be interpreted as spaces for "default spacing of spaces."

I'm trying to use word-wrap: break-word or word-break: break-all , but this is not the expected result ... This is what I want only if there is no character, so I will probably add 1 of them to CSS to break the lines (by how I'm not sure about the differences / which can be used / why)

Here is an example of what I would like (and what I tried)

http://jsfiddle.net/uazk54pL/

change

By the way, I did not use JavaScript because I thought it could be with css, and I'm not sure how to do it ... but I am not opposed to using this if no better solution is found

 .tmp { border: black 1px solid; width: 100px; margin: 5px; } #wrap { word-wrap: break-word; } #break { word-break: break-all; } } 

 nothing <div id="nothing" class="tmp"> hi im/a-longword <br/> <br/>breaklineon-and_and and/ <br/> <br/>ifnosymboliwantwordbreak </div> word-wrap: break-word; <div id="wrap" class="tmp"> hi im/a-longword <br/> <br/>breaklineon-and_and and/ <br/> <br/>ifnosymboliwantwordbreak </div> word-break: break-all; <div id="break" class="tmp"> hi im/a-longword <br/> <br/>breaklineon-and_and and/ <br/> <br/>ifnosymboliwantwordbreak </div> expected <div id="expected" class="tmp"> hi im/a- <br/>longword <br/> <br/>breaklineon- <br/>and_and and/ <br/> <br/>ifnosymboli <br/>wantwordbr <br/>eak </div> 

Answer 1

Finally, I used the tell method in the comments to the question. Since my text is added with JavaScript, I just add   after special characters before adding it to your page.

 str.replace(/([-/_])/g,"$& ") 

I also used CSS word-wrap:break-word; to cut words too long

Answer 2

I updated css in your example. Take a look if this is what you are trying to do.

http://jsfiddle.net/uazk54pL/1/

CSS looks like this:

 .tmp { border:black 1px solid; width:100px; margin:5px; position:relative; word-wrap: break-word; }