css/docs/content/components/truncate.md

title	path	status	source	bundle
Truncate	components/truncate	Stable	https://github.com/primer/css/tree/master/src/truncate	truncate

The css-truncate class will shorten text with an ellipsis. Always add a title attribute to the truncated element so the full text remains accessible.

Truncate overflow

Combine the css-truncate and css-truncate-overflow classes to prevent text that overflows from wrapping.

<div class="col-3">
  <div class="css-truncate css-truncate-overflow border p-3"
    title="branch-name-that-is-really-long">
    branch-name-that-is-really-long
  </div>
  <div class="border p-3 mt-3">
    branch-name-that-is-really-long
  </div>
</div>

Truncate target

Combine the css-truncate and css-truncate-target classes for inline (or inline-block) elements with a fixed maximum width (default: 125px).

Some text with a
<strong class="css-truncate css-truncate-target"
  title="branch-name-that-is-really-long">
  branch-name-that-is-really-long
</strong>

You can override the maximum width of the truncated text with an inline style attribute:

Some text with a
<strong class="css-truncate css-truncate-target" style="max-width: 180px"
  title="branch-name-that-is-really-long">
  branch-name-that-is-really-long
</strong>

You can reveal the entire string on hover with the addition of .expandable.

Some text with a
<strong class="css-truncate css-truncate-target expandable"
  title="branch-name-that-is-really-long">
  branch-name-that-is-really-long
</strong>