JavaScript Tutorial

CSS Text

CSS provides several properties that allow us to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively.

The commonly used text properties are text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more. These properties give us precise control over the visual appearance of the characters, words, spaces, and paragraphs.

 

Text Color

The color of the text is defined by the CSS "color" property. The style rule in the following example will define the default text color for the page.

Input:-

 

Output:-

Although, the color property seems like it would be a part of the CSS text, but it is actually a standalone property in CSS.

 

Text Alignment

The text-align property is used to set the horizontal alignment of the text.

Text can be aligned in four ways: to the left, right, center or justified (straight left and right margins).

Input:-

 

Output:-

Note:- When text-align is set to justify, each line is expanded so that every line has equal width (except the last line), and the left and right margins are straight. This alignment is mainly used in publications such as magazines and newspapers.

 

Text Decoration

This property is used to set or remove decorations from the text.

This property typically accepts one of the following values: underline, overline, line-through, and none. Underlining the text that is not a link, should be avoided, as it might confuse the visitor. By default, a link always has a line with it to differentiate.

Input:-

 

Output:-

The text-decoration property is extensively used to remove the default underline from the HTML hyperlinks. We can further provide some other visual cues to make it stand out from the normal text, for example, using a dotted border instead of a solid underline.

 

Text Transformation

This property is used to set the case for text. Text is often written in mixed cases. However, in certain situations, we may want to display our text in an entirely different case.

Using this property, we can change an element's text content into uppercase or lowercase letters or capitalize the first letter of each word, regardless of the original text case.

Input:-

 

Output:-

 

Text Indentation

This property is used to set the indentation of the first line of text within a block of text. It is typically done by inserting the empty space before the first line of text.

The size of the indentation can be specified using percentage (%), length values in pixels, ems, etc.

Input:-

 

Output:-

Note: Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS "direction" property.

Letter Spacing

This property is used to add additional spacing between the characters of text.

The property can accept length values in pixels, ems, and other units. Negative values are also possible, but they can make the text more difficult to read. When setting letter spacing, a length value indicates spacing in addition to the default inter-character space.

Input:-

 

Output:-

 

Word Spacing

This property is used to specify additional spacing between the words.

This property can accept a length value in pixels, ems, etc. Negative values are also allowed.

Input:-

 

Output:-

 

Line Height

This property is used to set the height of the text line. It is also called leading and is commonly used to set the distance between lines of text.

The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc.

Note: Negative values for the "line-height" property are not allowed. This property is also a component of the CSS font shorthand property.

Input:-

 

Output:-

 


 

Word break

This property defines the line break rules i.e specifies how words should break at the end of the line.

The default value of this property is normal. So, this value is automatically used when we don't specify any value.

Property

Description

keep-all

It breaks the word in the default style

Break-all

It inserts the word break between the characters in order to prevent the word overflow

Input:-

 

[trycss_Word break]

Output:-

 

Word wrap

This property is used to break the long words and wrap onto the next line. Also used to prevent overflow when an unbreakable string is too long to fit in the containing box.

Property

Description

Normal

This property is used to break words only at allowed break points

break-word

It is used to break unbreakable words

initial

It is used to set this property to its default value

inherit

It inherits this property from its parent element.

Input:-

 

[trycss_Word wrap]

Output:-

 

Text overflow

This property representation of overflowed text, which is not visible to the user. It signals the user about the content that is not visible. This property helps us to decide whether the text should be clipped or show some dots (ellipsis).

We have to use white-space: nowrap; and overflow: hidden; also with this.

Property

Description

Clip

It is the default value that clips the overflowed text.

Ellipsis

This value displays an ellipsis (…) or three dots to show the clipped text. It is displayed within the area, decreasing the amount of text.

Input:-

 

[trycss_Text overflow]

Output:-

 

Writing mode

It specifies whether the text will be written in the horizontal or vertical direction. If the writing direction is vertical, then it can be from left to right (vertical-lr) or from right to left (vertical-rl).

Property

Description

horizontal-tb

default value of this property in which the text is in the horizontal direction and read from left to right and top to bottom

vertical-lr

similar to vertical-rl, but the text is read from left to right.

vertical-rl

displays an ellipsis (…) or three dots to show the clipped text. It is displayed within the area, decreasing the amount of text.

Input:-

 

[trycss_Writing mode]

Output:-

 

Go back to Previous Course