如何让Text组件的numberOfLines属性截断时不拆分单词？

原生Text组件的numberOfLines属性是基于字符长度截断文本，不会识别单词边界，因此经常出现拆分单词的情况。要实现仅在完整单词末尾添加省略号的效果，需要自定义文本截断逻辑，以下是具体实现方案：

自定义截断组件思路 #

核心思路是通过测量文本的实际显示尺寸，逐步拼接单词直到接近指定行数的高度限制，最终在完整单词后添加省略号。具体步骤：

1. 获取文本容器的可用宽度；
2. 将原文本拆分为单词数组；
3. 逐个拼接单词，同时测量拼接后文本的显示高度；
4. 当高度超过指定行数的最大允许高度时，停止拼接并在上一个完整单词后添加省略号。

代码实现 #

import React, { useState, useRef, useEffect } from 'react';
import { Text, View } from 'react-native';

const WordWrapText = ({ text, numberOfLines = 1, style }) => {
  const [truncatedText, setTruncatedText] = useState(text);
  const containerRef = useRef(null);
  const textRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState(0);

  useEffect(() => {
    if (!containerWidth || !text) return;

    const words = text.split(/\s+/);
    let currentText = '';
    let isTruncated = false;

    // 遍历单词，逐步拼接并测量高度
    for (let i = 0; i < words.length; i++) {
      const tempText = currentText ? `${currentText} ${words[i]}` : words[i];
      
      textRef.current?.measure((_x, _y, _width, height) => {
        // 计算单行高度和允许的最大高度
        const lineCount = Math.ceil(_width / containerWidth);
        const lineHeight = height / lineCount;
        const maxAllowedHeight = lineHeight * numberOfLines;

        if (height > maxAllowedHeight) {
          // 超过行数限制，截断到上一个完整单词
          setTruncatedText(`${currentText}...`);
          isTruncated = true;
          return;
        }
        currentText = tempText;
      });

      if (isTruncated) break;
    }

    // 未超过行数限制，使用原文本
    if (!isTruncated) {
      setTruncatedText(text);
    }
  }, [text, numberOfLines, containerWidth]);

  return (
    <View ref={containerRef} onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
      <Text style={style}>{truncatedText}</Text>
      {/* 隐藏的测量文本，确保样式与显示文本一致 */}
      <Text ref={textRef} style={style} opacity={0} position="absolute">
        {truncatedText}
      </Text>
    </View>
  );
};

// 使用示例
export default function App() {
  const longText = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam dolore cumque dignissimos necessitatibus ad sunt dolores. Beatae ex iusto nostrum magni, aperiam sed nemo, qui, aliquam error maiores debitis! Porro.";
  return (
    <View style={{ padding: 20, width: '100%' }}>
      <WordWrapText text={longText} numberOfLines={2} style={{ fontSize: 16 }} />
    </View>
  );
}

注意事项 #

• 确保测量用的隐藏Text组件与显示文本的样式完全一致（字体、字号、行高等），否则尺寸计算会出现偏差；
• 文本拆分逻辑使用split(/\s+/)，会自动合并连续空格，同时保留带标点的完整单词（如dolores.）；
• 该方案依赖React Native的measure方法，在组件挂载完成后才能准确获取尺寸，因此需要用useEffect监听容器宽度和文本内容的变化。

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