React-PDF表格PDF生成：如何开启文本换行且禁用单词拆分？

针对你用react-pdf生成PDF时遇到的单词被拆分加连字符的问题，不用那些不支持的CSS属性，直接用react-pdf自带的特性就能解决：

核心解决步骤 #

• 用Text组件的breakWords属性：react-pdf的<Text>组件自带breakWords属性，默认值是true（允许拆分单词），把它设为false就能强制完整单词换行，不会拆分。
• 确保文本容器/Text有明确宽度：必须给Text或者它的父容器设置固定宽度，这样才会触发换行逻辑。
• 去掉固定行高：你代码里给row设置了固定高度，若内容超出会被截断，改成height: "auto"让行高自适应内容。

修改后的代码示例 #

组件部分 #

<Page size="A4" orientation="landscape" style={styles.page}>
  <View style={styles.tableContainer}>
    {/* -- Table Head: -- */}
    <View style={styles.head}>
      <Text style={{ ...styles.headCol, width: "8%" }}>State</Text>
      <Text style={{ ...styles.headColLast, width: "24%" }}>Subject</Text>
    </View>
    {/* -- Table Body: -- */}
    <View key={index} style={styles.row}>
      <Text style={{ ...styles.rowCol, width: "8%" }}>Ok</Text>
      {/* 添加breakWords={false}禁用单词拆分 */}
      <Text 
        style={{ ...styles.rowColLast, width: "24%" }}
        breakWords={false}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </Text>
    </View>
  </View>
</Page>

样式部分 #

const borderColor = "#90e5fc"
const paddingTopText = 3;
const paddingLeftText = 2;
const paddingRightText = 2;
const paddingBottomText = 2;

const styles = {
  page: {
    fontFamily: "OpenSans",
    fontSize: "9px",
    lineHeight: 1.3,
    flexDirection: "column",
    paddingTop: 30,
    paddingLeft: 30,
    paddingRight: 30
  },
  tableContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 24,
    borderColor: borderColor,
    borderWidth: 2
  },
  head: {
    flexDirection: "row",
    borderBottomColor: borderColor,
    borderBottomWidth: 1,
    height: "auto",
    textAlign: "left",
    fontWeight: "bold",
    flexGrow: 1,
    margin: 0,
    padding: 0
  },
  headCol: {
    borderRightColor: borderColor,
    borderRightWidth: 1,
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
  headColLast: {
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
  row: {
    flexDirection: "row",
    borderBottomColor: borderColor,
    borderBottomWidth: 1,
    // 去掉固定行高，改成auto自适应
    height: "auto",
    margin: 0,
    padding: 0
  },
  rowCol: {
    textAlign: "left",
    borderRightColor: borderColor,
    borderRightWidth: 1,
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
  rowColLast: {
    textAlign: "left",
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
}

补充说明 #

你之前尝试的overflowWrap、wordBreak这些CSS属性在react-pdf的样式系统里并不支持，它有自己独立的样式属性集合，所以用官方提供的breakWords才是正确的方式。你的react-pdf 3.0.1版本稳定支持这个属性，TypeScript类型也能正确识别。

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