New CSS3 Properties to Handle Text and Word Wrapping

Well, now that’s all changed, which I discovered while researching additions to my CSS3 Click Chart. The word-wrap property has been removed from the CSS3 spec and other related properties have been added.

Text-Wrap

The text-wrap property “specifies the mode for text wrapping”. Well, that description doesn’t tell us a whole lot, so let’s break down the values.

normal
This is the initial, or default, value for text-wrap. This is what happens when you don’t have any text wrap settings specified, so a value of “normal” is what you see occurring in any given element that has text.

none
This tells the browser that text in that element should not break at all. So if the text reaches the end of the parent container, it will overflow its parent and any overflow settings would handle the text’s visibility.

avoid
This value will still allow line breaking to occur, but this tells the browser to be selective as to where breaks happen. A nice example is shown in the spec in this section which basically shows that the browser will interpret parts of the markup so as to decide where to break lines and where to avoid breaking them.

Browser Support: None that I know of.

Overflow-Wrap

The overflow-wrap property is the replacement for the now-obsolete word-wrap property. The values are either “normal” or “break-word” — the same values that word-wrap uses.

This particular property, like word-wrap, handles what the spec refers to as “emergency wrapping”. The spec explains: “This property specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.”

The spec also explains that if text-wrap is set to “none”, then overflow-wrap will have no effect. Also, although this is for breaking a line in the middle of a word, the word will not be hyphenated. More on hyphenation below.

Browser Support: None that I know of.

Line-Break and Word-Break

According to the spec, these two properties have been introduced to help deal with the problems that arise from browsers assuming that lines and words need to break as is common in the English language. For example, in English a browser will not break a line within a word, but only where there is a space or certain punctuation marks. But in other languages, these rules don’t apply.

As the spec explains, although English lines may break at space characters or punctuation, this is not true in other writing systems that don’t use spaces and punctuation. In these writing systems “a line break opportunity is based on character boundaries, not word boundaries”. Thus, line breaks often have to be supressed within certain character combinations.

I honestly don’t fully understand all the values for these properties, so I won’t attempt to expand on them here. And judging by the description, it seems these two properties would be most useful to those dealing with content in languages that require different line breaking rules than that of English.

Browser Support: None that I know of.

Text-Overflow

The text-overflow property defines how to handle text that overflows its parent when the parent’s overflow is set to something other than “visible”. It accepts the following values:

clip
With this value (the default), the text will be cut off and the remainder would be invisible. This happens by default in all browsers now. Keep in mind that in order for this to take effect, the text would have to be inside an element that, for whatever reason, doesn’t allow natural line breaking.

ellipsis
With this value, the text will still be cut off but the fact that it’s incomplete will be indicated by an ellipsis (i.e. three dots “…”).

As shown below, browser support is very good for this property. Old versions of IE did include support, but it seems the implentation has changed and so newer IE uses prefixes. For more on this and a working live example, see this section on the click chart.

Browser Support: IE6+, Firefox 7+, Chrome 1+, Safari 1.3+, Opera 11+

Hyphens

And finally, CSS3 now introduces a hyphens property that can be used to tell the browser whether or not to automatically insert hyphens.

none
A value of “none” tells the browser to never hyphenate, even if break points are somehow defined.

manual
This value is the default and is how browsers naturally do hyphenation. This means that the browser won’t do any hyphenation unless there are hyphenation characters indicated. You can actually do this using the soft hyphenation character, which, inside of a word, looks like this: hy­phens.

auto
With a value of “auto”, the browser will automatically insert word breaks and hyphenation in accordance with the language defined for that page.

Hyphens have some support so you can see a working example with the accompanying code here.

Browser Support: IE10+, Firefox 6+, Safari 5.1+ (all require vendor prefixes; thanks to Hans for letting me know about support in Safari)

Conclusion

Although browser support is not great for these new features, it’s nice to know that in the future we’ll have some powerful tools at our disposal to handle overflow and line breaks in a more fine-grained manner.

Source:http://www.impressivewebs.com/new-css3-text-wrap/