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?

score 4 · Accepted Answer · edited May 23 '17 at 12:07

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.

I really like the `` approach but in my case all the text are dynamic and are coming from the database. `` needs me to know off-hand where to put it. I guess what I could do is just append `` to all symbols. — dokgu, Jan 11 '17 at 20:30

score 0 · Answer 2 · answered Jan 11 '17 at 18:10

0

Try adding this. word-break: keep-all;

answered Jan 11 '17 at 18:10

jmag

796
1
8
17

maybe because English/Spanish is considered one word. Try English/ Spanish. with space after /. – jmag Jan 11 '17 at 18:29
I don't think that's an option for me. – dokgu Jan 11 '17 at 18:38

CSS break-word using symbols first

2 Answers2

Linked