CSS3 Text Overflow

The new text properties of CSS3 offer more control over the text rendering.

Handling Text Overflow in CSS3

Several new properties were introduced by CSS3 for modifying the text contents. However, a few of these properties have existed for a long time. These properties give you precise control over text rendering on the web browser.

Hiding Overflow Text

Text can overflow in cases where it is prevented from wrapping. For example, when the value of the white-space property is defined to nowrap for the containing element or when a single word is too long to fit, such as a long email address. Under such circumstances, the CSS3 text-overflow property can be used to determine how to display the overflowed text content.

You can either choose to display or clip the overflowed text, or you can select to clip and display an ellipsis, or even select a custom string in the place of the clipped text to indicate the user.

Clip and ellipsis, and string are the values accepted by the word-break property.

Example :

p {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    background: #cdcdcd;
}
p.clipped {
    text-overflow: clip; /* clipped the overflowed text */
}
p.ellipses {
    text-overflow: ellipsis; /* display '…' to represent clipped text */
}

Warning: Most web browsers do not support the string value for the text-overflow property; therefore, you should better avoid this.
 

Breaking Overflow Text

You can also use the CSS3 word-wrap property for breaking a long word and forcing it to wrap onto a new line which overflows the containing element's boundaries.

Normal and break-word are the values accepted by the word-wrap property.

Example :

p {
    width: 200px;
    background: #ffc4ff;
    word-wrap: break-word;
}

Tip: It is recommended to check the individual property reference for all the possible values. Also, check the Browser support for these CSS properties.
 

Specify Word Breaking Rules

Using the CSS3 word-break property, you can set out the line-breaking rules for the text (i.e., how to break lines within words). 

Example :

p {
    width: 150px;
    padding: 10px;
}
p.break {
    background: #bedb8b;
    word-break: break-all;
}
p.keep {
    background: #f09bbb;
    word-break: keep-all;
}