Home 〉 CSS Tutorials 〉 CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS

CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS !

CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS !

Want to change how your text looks in a webpage? CSS text formatting properties like `text-align`, `text-transform`, `line-height`, and `letter-spacing` help you control the appearance of text in your HTML. These properties are key to improving readability and making content more attractive. You'll also learn how to style different blocks of text using classes and IDs. This post will provide you a tutorial on CSS Font Properties

CSS Text Formatting Properties Explained (with Examples)

Text is a big part of any webpage. CSS gives us many powerful properties to control how text looks and behaves. In this guide, we'll cover important CSS text formatting properties like:

  1. 'text-align'
  2. 'line-height'
  3. 'letter-spacing'
  4. 'word-spacing'
  5. 'text-indent'
  6. 'text-transform'
  7. 'text-overflow'
  8. 'white-space'
  9. 'word-break'
  10. 'word-wrap'
  11. 'text-justify'
  12. 'direction'
  13. 'writing-mode'

Let's go through each one step by step with examples.

1. text-align

Controls the horizontal alignment of text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-align: center;">This text is centered.</p>

</body>
</html>

output 📌

This text is centered.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'left', 'right', 'center', 'justify'

2. line-height

Controls the spacing between lines.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="line-height: 2;">Line height set to 2.</p>

</body>
</html>

output 📌

Line height set to 2.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Accepts : unitless number, px, em, %

3. letter-spacing

Adjusts space between characters.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="letter-spacing: 2px;">Wide spaced letters</p>

</body>
</html>

output 📌

Wide spaced letters

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Use for headings or stylized text.

4. word-spacing

Sets space between words.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="word-spacing: 10px;">Extra space between words.</p>

</body>
</html>

output 📌

Extra space between words.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Helpful for readability.

5. text-indent

Indents the first line of text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-indent: 40px;">Indented first line.</p>

</body>
</html>

output 📌

Indented first line.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Commonly used in articles or paragraphs.

6. text-transform

Changes text case.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-transform: uppercase;">This text is uppercase.</p>

</body>
</html>

output 📌

This text is uppercase.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'uppercase', 'lowercase', 'capitalize', 'none'

7. text-overflow

Handles overflowed text content in a box.

Code 📝

<!DOCTYPE html>
<html>
<body>

<div style="width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
This is a very long text that will be truncated.
</div>

</body>
</html>

output 📌

This is a very long text that will be truncated.
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Often used with 'ellipsis' for long content.

Values : 'ellipsis', 'clip'

8. white-space

Manages how white space inside elements is handled.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="white-space: pre;"> This will keep spacing.</p>

</body>
</html>

output 📌

This will keep spacing.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'

9. word-break

Controls word breaking rules.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="word-break: break-all;">averyveryverylongwordwillbreak</p>

</body>
</html>

output 📌

averyveryverylongwordwillbreak

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Useful in responsive layouts.

Values : 'break-all', 'keep-all', 'normal'

10. word-wrap (overflow-wrap)

Wraps words when they're too long.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="word-wrap: break-word;">averyveryverylongword</p>

</body>
</html>

output 📌

averyveryverylongword

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Note : 'word-wrap' is now 'overflow-wrap'

Values : 'break-word', 'normal'

11. text-justify

Applies justification to text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-align: justify; text-justify: inter-word;">
This paragraph is fully justified with equal spacing between words.
</p>

</body>
</html>

output 📌

This paragraph is fully justified with equal spacing between words.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Works best when combined with 'text-align: justify'

Values : 'auto', 'distribute', 'distribute-all-lines', 'linter-cluster', 'inter-ideograph', 'inter-word', 'kashida', 'newspaper'

12. direction

Sets the text direction.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="direction: rtl;">This text is from right to left</p>

</body>
</html>

output 📌

This text is from right to left

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'ltr' (left to right), 'rtl' (right to left)

13. writing-mode

Changes the flow direction of text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="writing-mode: vertical-rl;">Vertical text</p>

</body>
</html>

output 📌

Vertical text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Use in vertical writing or creative layouts.

Values : 'horizontal-tb', 'sideways-lr', 'sideways-rl', 'vertical-lr', 'vertical-rl'

Conclusion

Mastering text formatting in CSS helps create cleaner and more readable web pages. These properties allow you to control spacing, alignment, overflow, and even direction of the text — making your layout visually balanced and user-friendly.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What is the difference between 'text-align' and 'text-justify'?

'text-align' controls alignment (left, center, right), while 'text-justify' adjusts spacing between words to fill the line width evenly.

How do I make text flow vertically?

Use the 'writing-mode: vertical-rl;' or 'vertical-lr;' property to display text vertically.

Which property controls the spacing between lines?

Use 'line-height' to control the space between lines of text.

What's the difference between 'word-break' and 'word-wrap'?

'word-break' breaks long words; 'word-wrap' (now 'overflow-wrap') wraps words when needed to avoid overflow.

Previous Post Next Post