React应用中使用Material UI实现文本中间截断的问题

方法一：通用自定义截断函数 #

写一个可复用的工具函数，灵活控制前后保留字符数，同时处理短文本的边界情况：

const truncateMiddle = (text, startLength = 5, endLength = 5) => {
  if (!text || text.length <= startLength + endLength) return text;
  return `${text.substring(0, startLength)}...${text.substring(text.length - endLength)}`;
};

结合Material UI使用示例 #

直接在组件中调用函数，配合Typography组件展示：

import Typography from '@mui/material/Typography';

const TokenDisplay = ({ token }) => {
  return (
    <Typography variant="body1">
      {truncateMiddle(token, 5, 5)}
    </Typography>
  );
};

// 调用组件
<TokenDisplay token="0x3b3ch76c99f02o8k29aef20" />

该函数会自动判断文本长度：如果原文本长度小于等于前后保留字符数之和，直接返回原文本，避免多余省略号。

方法二：封装为可复用MUI组件 #

若项目多处需要该效果，可封装成独立组件提升复用性：

import Typography from '@mui/material/Typography';
import PropTypes from 'prop-types';

const TruncatedText = ({ text, startLength = 5, endLength = 5, ...props }) => {
  const truncated = truncateMiddle(text, startLength, endLength);
  
  return (
    <Typography {...props}>
      {truncated}
    </Typography>
  );
};

TruncatedText.propTypes = {
  text: PropTypes.string.isRequired,
  startLength: PropTypes.number,
  endLength: PropTypes.number,
};

// 使用示例
<TruncatedText text="0x3b3ch76c99f02o8k29aef20" variant="body1" />

关于CSS方法无效的说明 #

你尝试的wordWrap: 'break-word'用于处理长文本换行，和中间截断逻辑无关。CSS原生的text-overflow仅支持开头或结尾截断，无法实现中间截断效果，因此必须通过JS逻辑处理。

内容的提问来源于stack exchange，提问作者gule ranaa