Skip to content

Truncate

Table of contents
Table of contents

Use Truncate to shorten overflowing text with an ellipsis.

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" } %>

Arguments

NameTypeDefaultDescription
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