Latest web development tutorials
 

CSS3 Text


CSS3 Text

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

  • text-overflow
  • word-wrap
  • word-break

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix. 

Property
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

CSS3 Text Overflow

The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

It can be clipped:

This is some long text that will not fit in the box

or it can be rendered as an ellipsis (...):

This is some long text that will not fit in the box

The CSS code is as follows:

Example

p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}
Try it Yourself »

The following example shows how you can display the overflowed content when hovering over the element:

Example

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}
Try it Yourself »

CSS3 Word Wrapping

The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line. 

If a word is too long to fit within an area, it expands outside:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The CSS code is as follows:

Example

Allow long words to be able to be broken and wrap onto the next line:

p {
    word-wrap: break-word;
}
Try it Yourself »

CSS3 Word Breaking

The CSS3 word-break property specifies line breaking rules.

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

The CSS code is as follows:

Example

p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}
Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »


CSS3 Text Properties

The following table lists the new CSS3 text properties:

Property Description
text-align-last Specifies how to align the last line of a text
text-emphasis A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long words to be able to be broken and wrap onto the next line