CSS3: New properties for text-overflow and text-wrap

By Ryan Boudreaux

Takeaway: Ryan Boudreaux illustrates the CSS3 text-overflow and text-wrap properties in these code examples.

Continuing in our CSS3 series, I want to cover a few more aspects of the W3C Text Module; in particular, this segment will review the text-overflow and word-wrap properties. The Text Module document presents a set of text formatting properties for CSS3, and while many of these properties already existed in CSS2, many of the new properties have been added to address basic requirements in international text layout, particularly for East Asian and bidirectional text. The Text Module specification is a Candidate Recommendation, which means W3C believes the specification is ready to be implemented.

Text-overflow

On occasion text will need to be clipped and the text-overflow property determines if an ellipsis needs to be represented. There are several methods for representing overflow of textual content, using clip, ellipses, and ellipsis-word. Text overflow handles situations where some textual content gets clipped when it overflows an element's container such as a fixed width box, or within its inline-progression within a given layout area. This situation only occurs when the overflow property has the values: hidden, scroll or auto. Text-overflow allows the web author to introduce a visual hint at the two ending boundaries of the text flow within the element box (after an end). Text clipping is usually provided to the user in the form of a visual hint, which typically is represented with an ellipsis character (…).

The following guidelines are provided by the W3C for each instance and use for text-overflow:

• Clip: This is the default value, and will clip text as appropriate for the text content and given area. Any glyphs in the representation of text may be only partially rendered.
• Ellipsis: Is a visual hint which is inserted at each area boundary where text overflow occurs. The text-overflow-ellipsis property determines the content of the hint, and the insertions take place after the last letter that entirely fits on the line.

The syntax for representing the text-overflow is

text-overflow:  ellipsis | clip

Opera currently has a vendor prefix for text overflow that is specified in the form:

-o-text-overflow:

Text overflow gets applied when:

1. The area has the overflow property value set to either hidden, scroll, or auto.
2. The area has the white-space property value set to nowrap.

Using the ellipsis for text overflow, the example CSS3 code below defines a style for a paragraph with a solid 1px color border, an area width of 400px, with 5px padding:

p {

      border: 1px solid #CC33CC;

      width: 400px;

      padding: 5px;

      white-space: nowrap;

      overflow: hidden;

      o-text-overflow: ellipsis;

      text-overflow: ellipsis;

}

Along with the following HTML:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum.</p>

Here is the result as displayed in Firefox 7.0.1:

Figure A

Now, replace the value ellipsis with clip in the text overflow property code:

o-text-overflow: clip;

text-overflow: clip;

And here is the result as displayed in Firefox 7.0.1:

Figure B

The examples above demonstrate that the ellipsis is a better user design with the visual hint, whereas the clip cuts off the next word to fit the defined area or box.

Another option for user centric design would be to add a title for the content where a mouse-over exposes more of the textual content or a description, for example, in the HTML below:

<p title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. </p>

Here is the result with a mouse-over as displayed in Firefox 7.0.1:

Figure C

Word-wrap

With cross-browser support including IE as far back as version 5, the word-wrap property can be applied with the default value normal, or with the break-word value. In addition to the word-wrap property, CSS3 has several new properties controlled by both the overflow-wrap and the text-wrap property.

Word-wrap is probably not going to be the most widely used CSS3 property but it definitely has a practical use, for example, in controlling the styling of comment sections within blog posts or forms.

The syntax for the word-wrap property is:

word-wrap: normal | break-word;

The example below shows how text content is handled without the word-wrap property applied, where a paragraph is styled with a width of 200px, and a solid border to define the area as displayed in Firefox 7.0.1:

Figure D

Here is the same HTML when applied to the styling word-wrap property with the break-word value applied:

.word_wrap {

      word-wrap: break-word;

}

This is the result as displayed in Firefox 7.0.1:

Figure E

As previously mentioned, the practical application for the word-wrap property can be utilized within coding for comment sections for blogs in particular or for forms, which will help in preventing long strings of text that might be entered by hackers trying to vandalize sites.

Overflow-wrap specifies whether the browser or user agent may break within a word to prevent overflow when an otherwise unbreakable string of characters is too long to fit within the line. It only has an effect when the values for text-wrap are either normal or avoid. The values for overflow-wrap include normal hyphenate, and break-word.

Currently the use of overflow-wrap does not appear to be supported by any browsers.

Text-wrap specifies the mode for wrapping text, and includes the following possible three values, normal, none, and avoid. Normal is used where lines may break at allowed break points, as determined by the line-breaking rules in effect. None is utilized where lines may not break; text that does not fit within the block container overflows it. Avoid applies where line breaking is suppressed within the element: the UA may only break within the element if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for normal.