Skip to content

Line-breaks in webpages

wordbreaks

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”:

&shy;

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&shy;is&shy;a&shy;very&shy;long&shy;word

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

marcd View All

I love to write software. More then two decades ago I managed to make my hobby my full-time job so I spent more then 20 year writing professional software (I guess that makes me a "Senior Software Developer"). The last few years I spend most of the time developing in C#/.Net for all kind of windows-, web- and embedded-software.

In my free time I enjoy my family, taking photos and go diving in cold lakes and rivers in Switzerland.

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: