Skip to content
Primer/ViewComponents
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

On this page

Truncate

Use truncate to shorten overflowing text with an ellipsis.
  • Deprecated
  • Not reviewed for accessibility
On this page

Use Truncate to shorten overflowing text with an ellipsis.

Arguments

NameTypeDefaultDescription
tagSymbol:divOne of :div, :p, :span, or :strong.
inlineBooleanfalseWhether the element is inline (or inline-block).
expandableBooleanfalseWhether the entire string should be revealed on hover. Can only be used in conjunction with inline.
max_widthIntegernilSets the max-width of the text.
system_argumentsHashN/ASystem arguments

Examples

Default

branch-name-that-is-really-long

<div class="col-2">
  <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
</div>

Inline

branch-name-that-is-really-long
<%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>

Expandable

<%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>

Custom size

<%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>

With HTML content

<%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
  <span>branch-name-that-is-really-long</span>
<% end %>