Text Styling in CSS

CSS provides a powerful set of properties to style and manipulate text within your web pages. Let's dive into the key properties that allow you to control text appearance, flow, and behavior.

Text Alignment

Use the text-align property to control the horizontal alignment of text within a block element:

p {
  text-align: left; /* Default alignment */
}

p {
  text-align: center;
}

p {
  text-align: right;
}

p {
  text-align: justify; /* Align text to both edges */
}

Text Decoration

The text-decoration property lets you add decorative elements like underlines, overlines, and strikethroughs to text:

p {
  text-decoration: underline;
}

p {
  text-decoration: overline;
}

p {
  text-decoration: line-through;
}

Text Transform

The text-transform property controls the capitalization of text:

p {
  text-transform: capitalize; /* First letter of each word capitalized */
}

p {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

Spacing & Indentation

Control the spacing around text using the following properties:

• letter-spacing: Adjust the space between individual letters.
• word-spacing: Adjust the space between words.
• text-indent: Indent the first line of a paragraph.

p {
  letter-spacing: 2px;
}

p {
  word-spacing: 5px;
}

p {
  text-indent: 2em;
}

Text Shadow

Add a shadow effect to text using the text-shadow property. You can specify the offset, blur radius, and color of the shadow:

h1 {
  text-shadow: 2px 2px 5px #888888;
}

Overflow, Text Overflow, and White Space

Control how text handles overflow situations (when the content exceeds the container's boundaries) with these properties:

• overflow: Determines how content is handled when it overflows the element's box. Common values are visible (default), hidden, scroll, and auto.
• text-overflow: Specifies how text should be handled when it overflows its container. The ellipsis value adds an ellipsis (...) to truncate text. text-overflow:ellipsis; only works when the following are true:
  • The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
  • The element must have overflow:hidden and white-space:nowrap set.
• white-space: Controls how white space (spaces, tabs, and newlines) is handled. Values like normal, nowrap, and pre affect how text wraps and displays.

p {
  overflow: hidden; /* Content is hidden if it overflows */
}

p {
  text-overflow: ellipsis; /* Add ellipsis to truncated text */
}

p {
  white-space: nowrap; /* Prevent text from wrapping */
}

Word Wrap and Word Break

Control word wrapping and breaking behavior using these properties:

• word-wrap: Allows long words to be broken into multiple lines if they don't fit within the container. The break-word value enables this behavior.
• word-break: Controls how words are broken into multiple lines. Values like break-all (breaks words anywhere) and keep-all (prevents word breaks) can be used.

p {
  word-wrap: break-word;
}

p {
  word-break: break-all;
}

Summary

• CSS provides a range of properties to control text appearance, flow, and behavior.
• Use text-align, text-decoration, and text-transform to style text visually.
• Control spacing and indentation with letter-spacing, word-spacing, and text-indent.
• Add text shadows using text-shadow.
• Handle overflow situations with overflow, text-overflow, and white-space.
• Control word wrapping and breaking with word-wrap and word-break.