CSS3 Text

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

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

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:

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; 

}

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;

}

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:

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

The CSS code is as follows:

Example

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

{
    word-wrap: break-word;
}

CSS3 Word Breaking

The CSS3 word-break property specifies line breaking rules.

 

The CSS code is as follows:

Example

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

p.test2 {
    word-break: break-all;
}