Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - truncate
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<p class="paste-text">Good use cases for truncation include:</p> <ul> <li class="paste-text">Breadcrumbs</li> <li class="paste-text">Long URL links</li> <li class="paste-text">Long friendly names</li> </ul> <p class="paste-text">Truncation should generally not be used for page titles, labels, error messages, validation messages, notifications, or SIDs. A notable exception is when a long friendly name is used as a page title.</p> <p class="paste-text">Truncation can only happen on single lines of text and will never work on multiple lines. If you're looking for multiline truncation, that will need to be controlled with JavaScript.</p> <!-- Accessibility Section --> <h4 class="paste-heading paste-heading-h3">Accessibility</h4> <p class="paste-text">By default, Truncate has no accessibility concerns. While using Truncate, it is up to you to manage the resulting accessibility implications. You may want to consider how Truncate affects readability since it will visually hide information on your page.</p> <!-- Examples Section --> <h2 class="paste-heading paste-heading-h2">Examples</h2> <h3 class="paste-heading paste-heading-h3">Basic Truncate</h3> <p class="paste-text">Truncate must be used in a container with a set width. Without this container Truncate will have no effect since it spans the full width of a container.</p> <div class="example-section"> <div class="paste-box max-width-size30"> <p class="paste-text"> <span class="paste-truncate" title="Black Lives Matter. We stand with the Black community.">Black Lives Matter. We stand with the Black community.</span> </p> </div> </div> <h3 class="paste-heading paste-heading-h3">Truncate URL</h3> <div class="example-section"> <div class="paste-box max-width-size30"> <a href="/introduction/about-paste" class="paste-anchor"> <span class="paste-truncate" title="Learn more about Paste">https://paste.twilio.design/introduction/about-paste</span> </a> </div> </div> <!-- Do/Don't Section --> <div class="do-dont-container"> <div class="do-dont-item"> <div class="do-dont-header do-header">Do</div> <div class="do-dont-content"> <div class="do-dont-body">Use Truncate to shorten text that doesn't fit in its parent container.</div> <div class="paste-box max-width-size20 padding-space60" style="background-color: #F8F9FA; border-radius: 4px;"> <p class="paste-text"> <span class="paste-truncate" title="Some very long text to truncate">Some very long text to truncate</span> </p> </div> </div> </div> <div class="do-dont-item"> <div class="do-dont-header dont-header">Don't</div> <div class="do-dont-content"> <div class="do-dont-body">Don't use Truncate to shorten page headings, titles, labels, error messages, validation messages, or notifications. One exception is when a long friendly name is used as a page title.</div> <div class="paste-alert paste-alert-error"> <div class="paste-box max-width-size20"> <span class="paste-text"> <span class="paste-truncate" title="Your account balance is low and your credit card has expired. As a result we have suspended your account"> Your account balance is low and your credit card has expired. As a result we have suspended your account </span> </span> </div> </div> </div> </div> </div> <!-- Feedback Section --> <h2 class="paste-heading paste-heading-h2" id="feedback">Feedback</h2> <p class="paste-text">Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">