Text Effects

CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes

In this chapter you will learn about the following properties:

• text-overflow
• word-wrap
• word-break
• writing-mode

CSS Text Overflow

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

The CSS code is as follows:

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:

div.test:hover {
  overflow: visible;
}

CSS Word Wrapping

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

The CSS code is as follows:

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

p {
  word-wrap: break-word;
}

CSS Word Breaking

The CSS word-break property specifies line breaking rules.

The CSS code is as follows:

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

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

CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.

The following example shows some different writing modes:

p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

CSS Text Effect Properties

The following table lists the CSS text effect properties: