Avoid unnatural word-break

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>

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?.