Font Properties

Font Family:

This is a monospace font.

This is a sans-serif font.

This is a serif font.

font-family: 'Courier New', monospace; font-family: Arial, sans-serif; font-family: Georgia, serif;

Font Size:

Small font size (12px).

Larger font size (20px).

Font size relative to parent (1.5em).

font-size: 12px; font-size: 20px; font-size: 1.5em;

Text Alignment and Spacing

Text Align:

This text is left-aligned.

This text is center-aligned.

This text is right-aligned.

text-align: left; text-align: center; text-align: right;

Text Decoration:

Underlined text.

Strikethrough text.

Normal text.

text-decoration: underline; text-decoration: line-through; text-decoration: none;

Letter Spacing:

Normal letter spacing.

Wide letter spacing.

letter-spacing: normal; letter-spacing: 3px;

Text Overflow and Wrapping

Text Overflow:

This is an example of text-overflow with ellipsis.
This is an example of text-overflow with clip.
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-overflow: clip;

Word Wrap:

Thisisaverylongwordthatwillnotwrapnormally.
Thisisaverylongwordthatwillwrapafteracharacterlimit.
word-wrap: normal; word-wrap: break-word;

Text Shadows and Effects

Text Shadow:

This text has a shadow effect.

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

Text Transform:

This text is uppercase.

text-transform: uppercase;

Additional Examples

Truncate Text with Ellipsis

This is a long sentence that will be truncated with an ellipsis after reaching a certain width.

Clamp Text

This is an example of a multi-line text that is limited to two lines with ellipsis at the end.

Word Break

This is an example where the long text will break to the next line when it exceeds the container width.

No Break

This text will not break and will continue on a single line, even if it exceeds the container width.

Additional Text Properties

Word Spacing:

This text has increased word spacing.

word-spacing: 5px;

Line Height:

This text has an increased line height for better readability.

line-height: 1.8;

Vertical Align:

This element is vertically aligned in the middle.
vertical-align: middle;

Text Indent:

This paragraph has an indented first line.

text-indent: 30px;

Word Break - Break All:

Thisisaverylongwordthatwillbreakanywherewithoutspacing.
word-break: break-all;

Text Justify:

This text is justified, meaning it spreads out to fill the width of the container.

text-align: justify;

Text Stroke:

This text has a stroke effect.

-webkit-text-stroke: 1px black; color: white;

Underline and Overline:

This text has both underline and overline.

text-decoration: underline overline;

الأس والعدد السفلي (Superscript & Subscript)

الأس (Superscript):

قيمة المعادلة هي: E = mc2

E = mc2;

العدد السفلي (Subscript):

الجزيء في الماء هو: H2O

H2O;