Breaking words with HTML

Choose

Breaking words with HTML

updated by rck, 2004-10-04

Did you ever want to do some word breaks in your Documents but didn't know, how to do that in html? Well, I don't know how to do that automatically, but there is a nice softhypen, you might like.

1 | 2 | 3

Motivation
Question What's the difference between nice layed out, justified text and a website? Answer The text usually has some wordbreaks in it to create a more stylish layout. Too bad, there's no such thing as a automatic wordbreak in html. But theres a nice, ancient tag, that I rediscovered on Quirks Mode today.

Motivation

Question

What's the difference between nice layed out, justified text and a website?

Answer

The text usually has some wordbreaks in it to create a more stylish layout.

Too bad, there's no such thing as a automatic wordbreak in html. But theres a nice, ancient tag, that I rediscovered on Quirks Mode today.

Breaking words by yourself
Word knows another concept: The so called conditional, or soft space. That is, words only break, if the window or box around it wouldn't fit otherwise. This is possible with HTML as well, there are two ways using it. by using the `<wbr>` tag itself. Advantage: No problems in Internet Explorer. Disadvantage: Not supported by Opera and Safari. by using the html entity ``. Advantage: Not supported by Internet Explorer on the Mac, Weird output on Internet Explorer for Windows.

Breaking words by yourself

Word knows another concept: The so called conditional, or soft space. That is, words only break, if the window or box around it wouldn't fit otherwise.

This is possible with HTML as well, there are two ways using it.

by using the <wbr> tag itself. Advantage: No problems in Internet Explorer. Disadvantage: Not supported by Opera and Safari.
by using the html entity . Advantage: Not supported by Internet Explorer on the Mac, Weird output on Internet Explorer for Windows.

Soft Hypen
But the best it yet to come. Just found in the Paragraphs, Lines and Phrases section of the W3C Recommendation: the shy-tag. shy, like soft hyphen. It has the html-entity name `` and can be referred to as `` or `` as well. Ok, enough theory. Let's play!

Soft Hypen

But the best it yet to come. Just found in the Paragraphs, Lines and Phrases section of the W3C Recommendation: the shy-tag. shy, like soft hyphen. It has the html-entity name  and can be referred to as  or  as well.

Ok, enough theory. Let's play!

1 | 2 | 3

Motivation
Example wbr
Conclusion