CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Text Effects

In this chapter you will learn about the following properties:


CSS Text Overflow

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Run code

Both of the following properties are required for text-overflow:

The following example shows how you can display the overflowed content when hovering over the element:

Run code

CSS Word Wrapping

The word-wrap property specifies whether or not long words should be broken and wrap onto the next line.

If a word is too long to fit within an area, it expands outside:

This is veryveryveryveryveryveryveryveryveryvery long word.

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

This is veryveryveryveryveryveryveryveryveryvery long word.
Run code

CSS Word Breaking

The word-break property specifies line breaking rules.

Run code

CSS writing-mode

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

Run code