Line-breaks in webpages

I just got a bug-report where a field label is too long and (with the use of Bootstrap 3) doesn’t wrap but get cut off. So I took this opportunity to do some research about state of line-breaking in webpages and web-apps as of 2017.

CSS word-wrap

Since ages there is the CSS option called “word-wrap“. One can give it a value of “break-word” so the browser will break the text if it doesn’t fit into its box. For my Bootstrap 3 UI I put the following CSS in place for testing:

.form-group label.control-label {
    word-wrap: break-word;
}

Looks like it even works in crappy Internet Explorer.

Downside: The browser don’t know anything about break-points or even word-breaking rules from the language used. So they break long words anywhere.

HTML 5 word break-points

With HTML 5 we got a new HTML tag to specify where long words would be broken correctly. The Tag is like this

<wbr>

So one can use it like this:

This<wbr>is<wbr>a<wbr>very<wbr>long<wbr>word

If this is in place most browser will try to break at these break-points first before breaking anywhere else.

Downside: Internet Explorer does not support his at all but at least it doesn’t print the <wbr> tag but ignores it.

Downside: The words get wrapped at the given places but no dash (“‘-“) will be shown so it still looks kind of incorrect.

Soft-Hyphens

Already the old HTML 3.2 standard defined a character called “soft hyphen”:

­

The problem with this was that not all browser supported it. But the good news seems to be that today finally all browser – even Internet Explorer – added support for the soft-hyphen.

Using it:

This­is­a­very­long­word

As it looks to me this solution doesn’t have any downsides yet so I will go with this one.