Avoid unnatural word-break

Question

I have a <h1> title with a long word, such as the following. The browser width depends on the device of course, but I've noticed that on one of my devices, it looks like this:

which is not a very nice word-breaking.

How to ask the browser to do "nicer" breakings instead?

Example: Internationali-sation or -tion or -on but not n alone in the next line.

Here is how to reproduce the problem (I've hardcoded 260px here just to reproduce what I've seen on my device, but this is not really hardcoded in my code):

.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }

<div class="a">
<h1>Internationalisation</h1>
</div>

Answer 1

You can manually insert soft hyphen ­ which is visible only on break. It suggests a place where the browser might break that word. Its something like <wbr> but with hyphen. Something like this:

h1 { word-wrap: break-word; }
.small { width:260px; }

<h1 class="small">Internationali&shy;sation</h1>
<h1>Internationali&shy;sation</h1>

There are a lot of problems with automatic word breaking which usually depends on browser dictionary (hyhphens can be used) or external scripts. You can also read more about it in another questions like Is it possible to enable auto-hyphenation in HTML/CSS?.

Answer 2

The <wbr> tag exists for this purpose.

The HTML <wbr> element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }

<div class="a">
<h1>Internationali<wbr>sation</h1>
</div>

Alternatively you can also add a zero-width space to the word, though that might cause odd behavior when trying to copy the string. (We get some questions here on Stack Overflow where code doesn't work because it contains a hidden zero-width space.)

Answer 3

Well you could prevent breaking altogether...

.a { width: 260px; background-color: yellow; }
h1 { white-space: nowrap; }

<div class="a">
<h1>Internationalisation</h1>
</div>

Or. set spans inside your content to denote where breaking should occur. This is a big ass word, not two separate words so the browser is clueless unless you educate it

.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
h1 span { display: inline-block; }

<div class="a">
<h1>International<span>isation</span></h1>
</div>