React-pdf文本换行问题：如何实现单行无换行文本显示

问题场景 #

需要让PDF中的文本保持单行显示，避免自动换行，但React-PDF不支持whiteSpace: nowrap属性，当前动态计算元素宽度设置页面宽度的方式仍出现换行。

可行解决方案 #

1. 启用Text组件的wrap={false}属性

React-PDF的Text组件自带wrap属性，默认值为true（自动换行），将其设为false即可强制文本保持单行：

// PDF Output 部分修改
const MyDoc = () => {
  return (
    <Document>
      <Page
        size={{ width: width + 200 }}
        style={{
          fontFamily: pdfFont,
          fontSize: textSize,
        }}
      >
        <View style={{ lineHeight: "0" }}>
          {/* 添加wrap={false}禁用自动换行 */}
          <Text wrap={false}>{input}</Text>
        </View>
      </Page>
    </Document>
  );
};

注意：该属性需配合足够宽的Page宽度使用，否则文本会超出页面范围，需同步优化宽度计算逻辑。

2. 精准计算文本的实际渲染宽度

当前用ref.current.offsetWidth获取的是DOM元素宽度，和React-PDF中PDFKit渲染文本的宽度可能存在差异（字体渲染引擎不同），建议用Canvas直接计算文本实际宽度：

// 新增计算文本宽度的函数
const calculateTextWidth = (text, fontSize, fontFamily) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px ${fontFamily}`;
  return ctx.measureText(text).width;
};

// 修改getElSize函数
const getElSize = () => {
  // 计算文本实际宽度，加上预留边距
  const textWidth = calculateTextWidth(input, textSize, pdfFont);
  setWidth(textWidth + 200);
};

useEffect(() => {
  getElSize();
}, [input, textSize, pdfFont]);

此方式计算的宽度更贴合PDF中实际渲染的文本宽度，确保Page宽度足够容纳单行文本。

3. 确保容器布局不限制文本宽度

检查View组件样式，避免设置固定宽度或溢出隐藏，确保文本可在Page宽度范围内完整显示：

<View style={{ lineHeight: "0", width: '100%' }}>
  <Text wrap={false}>{input}</Text>
</View>

组合方案 #

将上述方法结合：先通过Canvas计算文本精准宽度并设置Page宽度，再给Text组件添加wrap={false}，即可确保文本始终保持单行显示。

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