CSS Text effects

CSS Text effects are used to add special effects to text. We will talk about the following:

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

CSS Text effects-Overflow

The CSS Text effects-overflow property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘…‘), or display a custom string.

p.test1 {
  white-space: nowrap; 
  width: 300px; 
  border: 5px #8B0000;
  overflow: hidden;
  text-overflow: clip;
}

CSS Text effect-word wrap

CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its container.

p.test1 {
  width: 150px; 
  border: 5px #FF0000;
  word-break: keep-all;
}

CSS Text effect-word break

CSS word-break property specifies line breaking rules.

p.test1 {
  width: 150px; 
  border: 5px #FF0000;
  word-break: keep-all;
}

CSS Text effect-Writing mode

CSS writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language.

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

Return