Skip to content
React Truncate

MiddleTruncate

A “middle ellipsis” component, when the content exceeds the limit of the parent’s width, an ellipsis symbol will appear (similar to CSS’s text-overflow: ellipsis effect), but its omission position can be specified in the middle of the text instead of the end.

Usage

Use it like a normal component, just pass the long text as the children prop.

import React from 'react'
import { MiddleTruncate } from '@re-dev/react-truncate'


const MyComponent: React.FC = () => {
  return <MiddleTruncate end={10}>{longText}</MiddleTruncate>
}

When to use?

For example, there are the following file paths of multiple files with the same name (or the scenario where the last information such as the delivery address of the express is more important):

Terminal window
path/to/foo/bar/baz.jpg
path/to/foo/bar/baz.mp4

If you use trailing truncation, you will get a set of omitted text that looks the same, and you can’t intuitively understand the difference between them:

Terminal window
path/to/foo/bar/baz...
path/to/foo/bar/baz...

If you use middle truncation, such as this example, by finding the position of the last level / and setting its end prop on <MiddleTruncate /> to retain the last level file name, you will get a clear truncation result:

Terminal window
path/to/foo/.../baz.jpg
path/to/foo/.../baz.mp4

Type Declarations

This is the Props type of the component, inherits most of the Props from the Truncate component.

Please note: Props removed from TruncateProps by Omit are ignored and will not be passed to the <Truncate /> component.

export type MiddleTruncateProps = Omit<
  TruncateProps,
  'middle' | 'lines' | 'width'
>

Live demo

Here is a basic example that could theoretically be suitable for any project. Adjust the slider to control how it displays in different situations.