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

Text truncation and max lines

Text truncation and max lines

Text truncation hides text that doesn't fit within a given area and adds an ellipsis (...) to show there's more text that's not visible. This is super useful in interface design where you might have names, descriptions, or other content that vary in length but need to fit into the same space — like in a user profile card or product description on an e-commerce site.

To set up text truncation, look for click on the 3-dots Type settings icon in the Typography section of the Design panel. Here, you can turn on the truncation feature. You can also specify the maximum number of lines allowed before the text is truncated.

The max lines setting kicks in only if:

  • Text resizing is on auto height or auto width
  • Vertical resizing is set to hug contents, which is handy for text within auto layout frames.

Using text truncation ensures your design remains elegant and functional, no matter the length of the content.

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