HTML CSS Bootstrap JavaScript jQuery MySQL PHP Data Mining

CSS Text Effects

CSS text effects help you manage how text behaves when it exceeds the boundaries of its container or when it needs to be oriented in a specific way.

1. The text-overflow Property

Specifies how overflowed content that is not displayed is signaled to users. It can be clipped, or it can display an ellipsis (...).

This is some very long text that will be truncated with an ellipsis.
.box {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

2. The word-wrap Property

Allows long words to be able to be broken and wrap onto the next line.

ThisIsAVeryLongWordThatWillNotFitAndNeedsToBreak.
.box {
    word-wrap: break-word;
}

3. The writing-mode Property

Specifies whether lines of text are laid out horizontally or vertically.

Vertical Text
.vertical {
    writing-mode: vertical-rl;
}
Tip: Use text-overflow: ellipsis on navbars or card titles to keep the layout consistent even if the content varies in length.
« Previous Lesson Next Lesson »