1. Balancing Text

With CSS's new text-wrap feature, centering headers is now simpler across all devices.

h1 {
  text-wrap: balance;
}

text-wrap is a new property in CSS, so I recommend checking browser compatibility before using it in production.

2. Text Indent

The CSS text-indent property indents the first line of a paragraph to improve readability.

p {
  text-indent: 0.25rem;
}

3. Truncating Text

Sometimes, to prevent large sentences from making a UI look bad, we can simply truncate the text using CSS.

.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

4. Fixed number of lines (Line Clamp)

Occasionally, it’s necessary to limit the number of lines displayed. Use this simple technique to achieve it.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Number of Lines */
}

It's over!

Thanks for reading 👋