Prev Page Next Page
Top

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





FEEDBACK

Rating


Message