Ready

Middle Truncate

Middle truncation allows the application to shorten long text strings while still showing the beginning and end of the text string.

Ready

Middle Truncate

Middle truncation allows the application to shorten long text strings while still showing the beginning and end of the text string.

Ready

Middle Truncate

Middle truncation allows the application to shorten long text strings while still showing the beginning and end of the text string.

Anatomy

Anatomy

Anatomy

  1. Start

  2. Ellipsis

  3. End

Behaviors

Behaviors

Behaviors

Proportions

Both text strings will expand equally to fill the available space. The ellipsis will remain centered.

Tooltip

When the user hovers over the text, the browser tooltip will be used to display the whole text string.

Best Practices

Best Practices

Best Practices

1. When to use

Middle truncate should be used when text has important identifiers at the end of text string. An example of this would be Basis line items, which often include abbreviations at the end to indicate KPI types or geographic targeting.

2. Use sparingly

Middle truncation, like all truncation, should only be used when space is limited. Redesigning layouts or allowing the text to wrap to multiple lines might be preferable solutions.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies