[Pattern] Text wrapping and truncation

大连/UX设计师/1年前/86浏览

版权

May 2022

This pattern explains how to handle long text when it exceeds the available space, for both mobile and web. It ensures users can always have the information they need and helps build a digital experience with good accessibility.

Background

Problem statement

[Pattern] Text wrapping and truncation（图ZMzgxNzQwNzE2） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Problem statement

Analysis

[Pattern] Text wrapping and truncation（图ZMzgxNzQwNzI4） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Analysis

Best practices

Comprehensive consideration

The decision of wrapping or truncation requires input across content, design, accessibility and development. The solution should includes what the content it is, when and where to wrap/truncate, and finally how to implement it. Therefore, involve partners in these fields as early as possible to reduce the back and forth in the delivery process.

Work in partnership with content strategist at the beginning because design should be based on the content and some content can't be truncated or hidden due to legal restrictions. Always ask your content strategist before truncating important content on the page.

Consider accessibility in design, including dynamic font, legibility, screen reader, etc. Refer to the general guidance in decision tree and other sections on this page.

[Pattern] Text wrapping and truncation（图ZMzgxNzM4MjA4） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Comprehensive consideration

Decision tree

This decision tree provides a path you can follow to determine what to do with a text based on the context of your use case. Co-work or review the decision with your content partner.

[Pattern] Text wrapping and truncation（图ZMzgxNzM4MjI0） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Decision tree

Users' content

Content or information that users typed in or created.

Primary supportive content

The crucial information for users, or content that users are required to read full text on the page.

Secondary supportive content

The secondary information in a component, it also has value for users but not as important as primary supportive content.

Teaser

A snippet of content to help users determine whether they want to click/tap to see more.

How to differentiate primary and secondary supportive content

When scanning: primary is the very first thing that users would pay their attention to, while secondary is users' next attraction
When monitoring: primary is the most desirable information, while secondary is information that nice to have and helpful to get a full understanding
When taking action: primary is the key information to support users to take action, while secondary is the information that makes the action thoughtful

Design examples

Account row

In an account row, the account name could be a nickname created by users so it should be considered as users' content. Thus account name should wrap instead of truncating when it's long. Account balance and day change are numeric values so they should neither wrap nor truncate. When text scales, consider changing layout to make text fit in.

[Pattern] Text wrapping and truncation（图ZMzgxNzM4MjQ0） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Account row

Fold a paragraph

Based on the context, the entity introduction is considered as a secondary supportive content. With a "Show more" button, users can easily get the full paragraph when it expands. Therefore in this situation, it's fine to truncate the text to save more vertical space.

[Pattern] Text wrapping and truncation（图ZMzgxNzM4Mjg0） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Fold a paragraph

Educational content list

In this case, label in the row is primary supportive content to tell users what it is, so it should wrap to display full text. The long sublabel serves as a teaser to attract users and help them determine whether to read more, so it's fine to be truncated.

[Pattern] Text wrapping and truncation（图ZMzgxNzM4Mjky） - 交互/UE - 站酷设计师Yoyo_Yoyo原创素材 - 站酷ZCOOL

Educational content list

Table cell

Stock names can be truncated in the middle in tables and charts, especially on small break points. The symbol should not be truncated, and on mouseover the entire stock name should appear. In the first column, the symbol itself is the primary supportive content and the entity name is secondary. To save more space for other columns in such a wide data table, truncate the entity name, and display full text via a tooltip when hovering.

Table cell

Text wrapping

Text wrapping is to break text into several lines so that it will fit into the available width of a display area. This is how most of text elements should behave in our products.

Usage

Consider the appropriate line length for body text on different screens
Don't break words or hyphenate words when wrap text
Change design layout to accommodate the content when font size increases

Line length

In web and mobile landscape views, avoid body text that is too wide as it reduces legibility. The W3C recommends a maximum line length of 80 characters.

Text truncation

Truncation is to cut off text when it exceeds the available space thus part of the text is not visible on screen. Generally we want to avoid truncation wherever possible because it prevents users from getting information.

Usage

Use ellipsis symbol or other clues to indicate text is truncated
To ensure readability, avoid truncating at the beginning or middle of the text
Provide access to the additional text through a tooltip or "Show more"
If the number of allowed characters ends in the middle of a word, the truncation should begin at the previous word space

Screen reader

Truncation is only for display, screen reader should always read the full text until users shift focus to another element on screen.

Conditions of text truncation

Always work with a content strategist to define the condition of truncation.

From development perspective, there are 3 technically achievable methods to set limit for text truncation:

Truncate when text exceeds a certain number of lines

This means setting a fixed value for the number of lines, beyond which text will be truncated. When the font size increases, it displays less content due to the fixed number of lines.

Truncate when text exceeds a certain number of characters

This means setting a fixed value for the number of total characters, beyond which text will be truncated. When the font size increases, it will wrap and takes more space to display the same content.

Truncate when text exceeds a certain height

This means setting a fixed value for the height of text, beyond which will be truncated. When the font size increases, text maybe horizontally cut off so this is not recommended.

声明

原创作品 UI 交互/UE