Browse CSS

Text

Control text alignment, emphasis, wrapping, and accessible labels.

Wrapping, previews, and weight

Class	Behavior
`truncate`	`overflow:hidden;text-overflow:ellipsis;white-space:nowrap`
`whitespace-normal`	`white-space:normal`
`whitespace-nowrap`	`white-space:nowrap`
`break-words`	`overflow-wrap:break-word`
`wrap-anywhere`	`overflow-wrap:anywhere`
`font-normal`	`font-weight:400`
`font-medium`	`font-weight:500`
`font-bold`	`font-weight:700`
`tabular-nums`	`font-variant-numeric:tabular-nums`
`proportional-nums`	`font-variant-numeric:proportional-nums`
`line-clamp-none`	`overflow:visible;display:block;-webkit-box-orient:initial;-webkit-line-clamp:unset`
`line-clamp-1`	`overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1`
`line-clamp-2`	`overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2`
`line-clamp-3`	`overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3`

Text and tables

Class	Behavior
`text-start`	Align text at the start of its reading direction.
`text-end`	Align text at the end of its reading direction.
`text-center`	Center text.
`align-middle`	Vertically center inline or table-cell content.
`font-semibold`	Font weight 600.
`muted`	The theme’s secondary text color.
`text-balance`	Balance line lengths in headings and short messages.
`text-pretty`	Avoid a single short word on the last line of prose.
`visually-hidden`	Hide text visually while keeping it available to screen readers.

Wrapping helpers are progressive: browsers without text-wrap support wrap normally. Prefer a small copy edit before relying on them, and do not add forced line breaks to avoid a widow.

Use visually-hidden for labels and context that sighted users get from the layout, such as a label for a search field beside a visible button. Do not apply it to links, buttons or other focusable controls, which would hide the keyboard focus position.

Long names that wrap

Use wrap-anywhere for long identifiers that must remain readable. Truncate is appropriate for a compact preview when the full content is available elsewhere.

Wrap the full name

customer_onboarding_research_findings_and_recommendations.pdf

Compact preview

customer_onboarding_research_findings_and_recommendations.pdf

Read Full Name

<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
  <article class="panel stack gap-sm min-w-0">
    <h3 class="m-0">
      Wrap the full name
    </h3>
    <p class="wrap-anywhere m-0">
      customer_onboarding_research_findings_and_recommendations.pdf
    </p>
  </article>
  <article class="panel stack gap-sm min-w-0">
    <h3 class="m-0">
      Compact preview
    </h3>
    <p class="truncate m-0">
      customer_onboarding_research_findings_and_recommendations.pdf
    </p>
    <a href="#wrapping">
      Read Full Name
    </a>
  </article>
</div>

Short previews, complete content

Clamp a card excerpt when a visible link leads to the complete text. Do not clamp instructions, errors, or essential information.

Building a shared design language

A shared design language helps teams make clear, consistent interfaces. Start with reusable components, readable content, and a small set of layout utilities that work across screen sizes.

Read Full Text

<article class="panel stack gap-md max-w-md">
  <h3 class="m-0">
    Building a shared design language
  </h3>
  <p class="line-clamp-2 m-0">
    A shared design language helps teams make clear, consistent interfaces. Start with reusable components, readable content, and a small set of layout utilities that work across screen sizes.
  </p>
  <a href="#complete-text">
    Read Full Text
  </a>
</article>

Building a shared design language

A shared design language helps teams make clear, consistent interfaces. Start with reusable components, readable content, and a small set of layout utilities that work across screen sizes.

Numbers that line up

Tabular numerals use equal-width digits when the active font supports them. Combine them with logical end alignment for numeric columns.

Subscriptions1,284.00

Services1,111.00

Total2,395.00

<div class="panel stack gap-sm max-w-sm">
  <div class="flex justify-between gap-md">
    <span>
      Subscriptions
    </span>
    <span class="tabular-nums text-end">
      1,284.00
    </span>
  </div>
  <div class="flex justify-between gap-md">
    <span>
      Services
    </span>
    <span class="tabular-nums text-end">
      1,111.00
    </span>
  </div>
  <div class="flex justify-between gap-md font-semibold">
    <span>
      Total
    </span>
    <span class="tabular-nums text-end">
      2,395.00
    </span>
  </div>
</div>

Hidden labels

<form class="cluster gap-sm" role="search" action="/search">
  <label class="visually-hidden" for="css-hidden-search">
    Search documentation
  </label>
  <input class="input w-auto" id="css-hidden-search" name="q" type="search">
  <button class="btn secondary" type="submit">
    Search
  </button>
</form>