HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Text Effects

❮ Previous Next ❯

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

In this part, you'll find details about these features:

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

CSS Text Overflow

The CSS text-overflow property tells us how to show users when content overflows and is not visible.

It can be clipped:

This text is too long to fit inside the box.

You may also see it as three dots (...) when it's shown on the screen..

This text is too long to fit inside the container.

Here is the CSS code:

Here's an easy method to display additional content when you move your mouse pointer over something in HTML:

CSS Word Wrapping

The word-wrap CSS property helps long words break and go to the next line when needed.

If a word is too long to fit within a designated area, it extends outside the defined boundaries.

This text has a super-duper long word: thisisaveryveryveryveryveryverylongword. The really long word will break and go to the next line.

The word-wrap property helps text move to the next line when needed, even if it has to break a word in two.

thisisaveryveryveryveryveryverylongword. The lengthy word will split and continue on the next line.

Here is the CSS code:

CSS Word Breaking

The CSS property called word-break helps determine how to split lines of text.

This paragraph has some words. This line will split at hyphens.

This paragraph has some words. It will split at any letter or symbol.

Here is the CSS code:

CSS Writing Mode

The writing-mode CSS property determines whether text lines should be horizontal (side by side) or vertical (up and down).

Here is some text that contains a part with a special style called 'wmtest2,' and it's written in a way that goes from top to bottom, like in vertical writing.

The example below demonstrates various ways of writing text:
❮ Previous Next ❯