React按单词截断文本（省略号）：越南语适配及容器占比需求咨询

一、CSS原生单行截断方案（轻量无依赖） #

如果是单行文本场景，要填充父容器80%空间且按单词截断，可组合以下CSS属性，同时适配越南语的分词规则：

.truncated-text {
  display: inline-block;
  max-width: 80%; /* 占父容器80%宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all; /* 禁止单词内截断 */
  overflow-wrap: normal;
}

给包含文本的元素添加越南语语言属性，帮助浏览器识别分词规则：

<div lang="vi">
  <span class="truncated-text">Nội dung tiếng Việt cần xử lý cắt ngắn</span>
</div>

该方案依赖浏览器对越南语分词的原生支持，大部分现代浏览器已兼容。

二、自定义React组件（精准控制分词，支持多行） #

若CSS方案无法满足越南语的特殊分词需求，可自行实现基于单词拼接的截断逻辑，核心是逐个添加单词并检查宽度：

import { useRef, useEffect, useState } from 'react';

const WordTruncatedText = ({ text, containerRef }) => {
  const [truncatedText, setTruncatedText] = useState(text);
  const textRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current || !textRef.current) return;

    const containerWidth = containerRef.current.offsetWidth;
    const maxTextWidth = containerWidth * 0.8;
    // 按空格/连字符拆分越南语单词，保留分隔符确保格式还原
    const wordSegments = text.split(/([\s\-]+)/);
    let currentContent = '';
    let needTruncate = false;

    for (const segment of wordSegments) {
      const tempContent = currentContent + segment;
      textRef.current.textContent = tempContent;
      if (textRef.current.offsetWidth > maxTextWidth) {
        needTruncate = true;
        break;
      }
      currentContent = tempContent;
    }

    setTruncatedText(needTruncate ? `${currentContent.trim()}...` : text);
  }, [text, containerRef]);

  return <span ref={textRef}>{truncatedText}</span>;
};

// 使用示例
const App = () => {
  const containerRef = useRef(null);
  const vietText = "Chào mừng bạn đến với thế giới lập trình React, giải quyết vấn đề cắt ngắn văn bản tiếng Việt";
  
  return (
    <div ref={containerRef} style={{ width: '100%', padding: '1rem' }}>
      <WordTruncatedText text={vietText} containerRef={containerRef} />
    </div>
  );
};

这种方案完全自定义分词逻辑，能适配越南语的复合词、声调字符等特殊情况。

三、替代库方案（多语言友好） #

如果不想手动实现，可尝试react-truncate，它对非英语语言的分词支持更完善：

import Truncate from 'react-truncate';

const VietTruncatedText = ({ text, containerRef }) => {
  const maxWidth = containerRef.current?.offsetWidth * 0.8 || 300;
  return (
    <Truncate
      lines={1}
      ellipsis="..."
      style={{ maxWidth: `${maxWidth}px`, display: 'inline-block' }}
    >
      {text}
    </Truncate>
  );
};

安装依赖：

npm install react-truncate

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