<?xml version="1.0" encoding="utf-8"?>

Text wrapping

Text wrapping Bad Practice
Text wrapping Best Practice

When designing for mobile and web, ensure your wireframes illustrate how the text would display responsively on various devices. There are a few things to consider, like appropriate font size for body text, line length, and height. When it comes to wireframing, the most important thing is making the text wrap and maintaining the hierarchy.

  • Headlines: Use truncation and add an ellipsis (…), making sure users can still view the full title on hovering or seeing tooltips. There must be at least 4 characters of non-truncated content in a truncated string.
  • Text blocks: Use truncation and the "Show more" button to indicate that people can view overflow content below the fold or on another page.[1]

Pro Tip: Apply truncation to breadcrumbs, pagination, and long URL links.

Improve your UX & Product skills with interactive courses that actually work