Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html

What are CSS text effect properties?

Vafa Batool

Overview

Text effect properties in CSS allow us to apply different formatting styles to the text within an HTML document. These styles can include splitting up words when a sentence is too long to fit within a line, changing its orientation, and applying any patterns that a programmer needs to add.

Types of text effect properties

  • Text overflow
  • Word wrap
  • Word break
  • Writing mode

Text-overflow

This property specifies how the text that overflows out of a boundary should be displayed to the user. This property must be used with two other properties:

  • white-space: nowrap
  • overflow: hidden

There are two types of showing overflown text:

1. Clipped

This type cuts the text at the end of the boundary when it is overflowing as follows:

An example of text-overflow in which the line is clipped at the end

2. Ellipses

This type adds ellipses or '...' at the end of the text that overflows, as shown below:

An example of text-overflow in which the line is hidden from view by adding ellipses

Syntax

The text-overflow property has a straightforward syntax and can take the following two properties as discussed earlier:

text-overflow: clip|ellipses
Syntax of Text-overflow

Code example

Program example of text-overflow

Explanation

In the code above, we define two classes of the p tag, where p.type1 creates the style for clipped type, and p.type2 specifies the style for the ellipses type of text-overflown. You can play around by changing the properties to understand it better.

Note: The white-space and overflow tags are used for text-overflow to work, as discussed before.

Word-wrap

The second CSS text effect property is word-wrap, which breaks long words and splits them into the next line. This happens when the last word in a sentence is too long to fit inside a boundary such that it can extend beyond as shown below:

word-wrap can be used to fit 'longlonglong' inside the boundary set for the text

With the word-wrap property, we can break up the long words to move to the next line for improved readability as follows:

Syntax

word-wrap: break-word
Syntax of Word-wrap

Code example

Program example of word-wrap

Word-break

The word-break property is similar to word-wrap because it enables us to specify how to break up paragraphs when they do not fit in a given boundary. It specifies how words at the end of the line should be broken up. There are two types of this property:

1. keep-all

This keeps all the words at the end of the line without breaking them. Instead, it moves the entire word to the next line as follows:

An example of keep-all type of word-break where all the words are preserved

2. break-all

This value for word-break breaks all the words that are causing the line to spill over and splits them onto the next line:

An example of break-all type of word-break where all the words are split on to the next line

Syntax

word-break: keep-all| break-all 
Syntax of word-break

Code example

Program example of word-break

Writing-mode

This CSS property lets the programmer specify if they want the text to be displayed horizontally or vertically. It can be implemented within the p tag as well as a span tag.

Syntax

writing-mode: horizontal-tb|vertical-rl|vertical-lr
Syntax of writing mode
  • horizontal-tb is the default value, which displays the text horizontally from left to right and vertically from top to bottom.
  • vertical-rl displays the text vertically from top to bottom and horizontally from right to left.
  • vertical-lr displays the text vertically from top to bottom and horizontally from left to right.

Code example

Explanation

  • Line 5: We first define a class for the paragraph with writing mode as horizontal. This is also the default style of a text.
  • Line 9: We define the vertical-rl styling to type2 class in the span tag.
  • Line 13: We define the vertical-lr styling to type2 class in the p tag.

RELATED TAGS

css
html
RELATED COURSES

View all Courses

Keep Exploring