Text Formatting

Text Formatting utilities control how text is aligned, transformed, decorated, wrapped, truncated, and balanced. Use these utilities when the content itself is already sized correctly, but its presentation needs adjustment.

For text size, muted text, paragraph rhythm, and drop caps, see the Text documentation.

All text formatting utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

<p className="text-center text-uppercase">
  FrontAlign Framework
</p>

Text alignment

FrontAlign uses logical alignment values where possible.

<!-- Start-aligned based on writing direction -->
<p className="text-start">Left-to-right content.</p>

<!-- Centered heading or hero text -->
<section className="text-center">
  <h1>Build modern interfaces faster.</h1>
  <p>One lightweight engine for any stack.</p>
</section>

<!-- End-aligned metadata -->
<p className="text-end">Updated today</p>

<!-- Justified editorial content -->
<p className="text-justify">Long-form article body text.</p>

Text transform

<!-- Uppercase label or badge -->
<span className="text-uppercase">New Release</span>

<!-- Capitalize a title -->
<h3 className="text-capitalize">premium dashboard template</h3>

Text decoration

<!-- Deleted price with strikethrough -->
<p>
  <span className="text-line-through text-muted">$49</span>
  <span>$29</span>
</p>

<!-- Remove link underline -->
<a href="#" className="text-no-decoration">Documentation</a>

Truncation

Use text-truncate for single-line overflow with an ellipsis. The container must have a constrained width.

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

<p className="text-truncate">
  This is a very long title that will be truncated with an ellipsis when it overflows.
</p>

For multi-line truncation, use the Line Clamp documentation.

No wrap

Use text-nowrap to prevent a phrase or value from breaking across lines.

<span className="text-nowrap">Do not break this phrase</span>

Text break

Use text-break for long URLs, tokens, file names, and user-generated content that could overflow its container.

<p className="text-break">
  https://example.com/very/long/path/that/should/not/break/the/layout
</p>

Pretty text

Use text-pretty for better paragraph wrapping in browsers that support it.

<p className="text-pretty">
  FrontAlign helps improve the reading experience by supporting modern text wrapping utilities.
</p>

Balanced text

Use text-balance for headings and short display text to distribute line length more evenly.

<h1 className="text-balance">
  Build modern interfaces without framework chaos.
</h1>

Utility scales

The full class list for each group, with CSS output and recommended use.

Alignment

Transform

Decoration

Wrapping

Combined utilities

Utilities compose freely — pair transform, alignment, decoration, and wrapping on the same element.

<!-- Transform + muted -->
<span className="text-uppercase text-muted">Documentation</span>

<!-- Balance + center -->
<h1 className="text-center text-balance">
  Build with utilities. Ship with components.
</h1>

<!-- Truncate + no decoration -->
<a href="#" className="text-truncate text-no-decoration">
  Very long documentation link title
</a>

Choosing the right utility

Usage notes

• Use text-start and text-end for writing-direction-aware layouts instead of text-left and text-right.
• Use text-center for hero sections, empty states, and short display text — avoid on long body paragraphs.
• Use text-uppercase for short labels and badges, not for long text blocks where legibility suffers.
• Use text-truncate only when the container has a constrained width; otherwise it has no visible effect.
• Use text-break for long URLs, tokens, and user-generated strings that could break the layout.
• Use text-balance for headings and short display text to even out line lengths across multiple lines.
• Use text-pretty for paragraphs where supported — it prevents orphaned words at the end of lines.
• Use Line Clamp utilities for multi-line truncation instead of text-truncate.