Skip to content

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


So one can use it like this:


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.


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:


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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: