Truncate
Use truncate to shorten overflowing text with an ellipsis.
Use Truncate
to shorten overflowing text with an ellipsis.
Name | Type | Default | Description |
---|---|---|---|
system_arguments | Hash | N/A | System arguments |
items
Text slot used for the truncated text.
Name | Type | Default | Description |
---|---|---|---|
priority | Boolean | N/A | if true, the text will be given priority |
expandable | Boolean | N/A | if true, the text will expand on hover or focus |
max_width | Integer | N/A | if provided, the text will be truncated at a maximum width |
system_arguments | Hash | N/A | System arguments |
<%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
<%= render(Primer::Beta::Truncate.new) do |component| %><% component.with_item do %>really-long-repository-owner-name<% end %><% component.with_item(font_weight: :bold) do %><%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name<% end %><% end %>
<%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %><% component.with_item(tag: :li) do %>primer<% end %><% component.with_item(tag: :li, priority: true) do %>/ css<% end %><% component.with_item(tag: :li) do %>/ Issues<% end %><% component.with_item(tag: :li) do %>/ #123 —<% end %><% component.with_item(tag: :li, priority: true) do %>Visual bug on primer.style found in lists<% end %><% end %>
<%= render(Primer::Beta::Truncate.new) do |component| %><% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %><% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %><% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %><% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %><% end %>
<%= render(Primer::Beta::Truncate.new) do |component| %><% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %><% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %><% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %><% end %>
<%= render(Primer::Beta::Truncate.new) do |component| %><% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %><% end %><br/><%= render(Primer::Beta::Truncate.new) do |component| %><% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %><% end %><br/><%= render(Primer::Beta::Truncate.new) do |component| %><% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %><% end %>