CSS 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.

EXAMPLE:

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

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

Run

CSS Word Wrapping

➢The CSS 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.

EXAMPLE:

p {
word-wrap: break-word;
}

Run

CSS Word Breaking

➢The CSS word-break property specifies line breaking rules.

EXAMPLE:

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

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

Run

CSS Writing Mode

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

EXAMPLE:

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

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

Run

Prev Page Next Page