I'm working on a map legend and I have some trouble when the word is too long. I want to know if it's possible to add some property to the text so it break to the last symbol space, score, underscore, slash, and other punctuation

In other words, I want more symbols to be interpret like spaces for the "default spaces breakline".

I try using word-wrap: break-word or word-break: break-all but it's not the expected result... It is what I want only if there is no symbol so I'll probably add 1 of these to the CSS to break lines (by the way I'm not sure about the differences / wich one to use / why)

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

/

edit

by the way, I didn't use JavaScript because I thought it can be with css, and I'm not really sure how to do it... but I'm not against using it 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>

I'm working on a map legend and I have some trouble when the word is too long. I want to know if it's possible to add some property to the text so it break to the last symbol space, score, underscore, slash, and other punctuation

In other words, I want more symbols to be interpret like spaces for the "default spaces breakline".

I try using word-wrap: break-word or word-break: break-all but it's not the expected result... It is what I want only if there is no symbol so I'll probably add 1 of these to the CSS to break lines (by the way I'm not sure about the differences / wich one to use / why)

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

http://jsfiddle/uazk54pL/

edit

by the way, I didn't use JavaScript because I thought it can be with css, and I'm not really sure how to do it... but I'm not against using it 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>

• javascript
• html
• css
• word-wrap
• word-break

• You can add soft hyphenation marks on your words with ­. Does this help? – Samuli Hakoniemi Commented Apr 17, 2015 at 9:21
• Words I'm using are imported from a database, so unfortunately I think I won't be able to add marks where needed – Luckyn Commented Apr 17, 2015 at 9:26
• Actually I think the problem is how to break "ifnosymboliwantwordbreak" into words, I doubt css can achieve this. – Jakehao Commented Apr 17, 2015 at 9:31
• I don't want to break it into real word, what I was thinking is break to N character as the word-break: break-all property do (see expected box) also as I say in the last edit, I'm not against adding JavaScript :) – Luckyn Commented Apr 17, 2015 at 9:36
• I don’t know of any way to tell the browser via CSS what characters it should consider as valid points to break a word. But if you have a list of characters defined yourself, then you could add the soft hyphen in those places yourself (via script), after you read the words from the database. – C3roe Commented Apr 17, 2015 at 10:11

2 Answers 2

I finally used the method tell in the question's ments. As my text is add with JavaScript, I'm just addind   after special characters before add it to my page.

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

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

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

http://jsfiddle/uazk54pL/1/

The CSS looks like this:

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