CSS break-word using symbols first

Question

I don't find the word-wrap: break-word; rule too pleasant in the eyes in certain situations because it tends to break long strings in the wrong places given the right condition.

It produces something like this:

|--- DIV ---|
|           |
| English/S |
| panish    |
|           |
|-----------|

instead of

|--- DIV ---|
|           |
| English/  |
| Spanish   |
|           |
|-----------|

Is there a way for me to fine-tune my CSS rules so that it tries to break words through symbols first before breaking the actual words? If so, how do I do it?

Answer 1

I think the only way to achieve such behavior is by using <wbr>(mdn link) in your markup at the position you wish to cause the word break.

Have a look:

.word-box{
  width:100px;
  margin:5em;
  border:1px solid #606266;
}

<div id='break-wbr' class='word-box'>
English/<wbr>Spanish
</div>

It's also well supported.

Another way to break at a position would be by using shy hyphens ( ­)

.word-box{
  width:100px;
  margin:5em;
  border:1px solid #606266;
}

<div id='break-shy' class='word-box' lang='en'>
English/&shy;Spanish
</div>

but the downside of using shy hyphens is that it inserts a visible hyphen at the point of word break.

You can also have a look at a very similar and more detailed answer here.