如何使用 react-pdf 进行自动换行答案

【问题标题】：How to do word wrap with react-pdf如何使用 react-pdf 进行自动换行
【发布时间】：2021-11-16 15:48:16
【问题描述】：

我有一个按预期呈现的 pdf，除了一个问题，即当页面的信息中包含一个很长的单词时，而不是将单词换行到换行符上，单词只是从容器中继续，离开页面，谁知道在哪里。

这是造成此问题的容器之一的设置。样式后跟实际结构。

       const styles = StyleSheet.create({
         section: {
            paddingBottom: 20,
            position: 'relative',
         },
         sectionTitle: {
            fontSize: 12,
            fontWeight: 700,
            borderBottom: '2 solid #333333',
            display: 'block',
            marginBottom: 10,
            textTransform: 'uppercase',
            lineHeight: 1.2,
          },
        })

下面是页面部分的设置

        <View style={styles.section}>
          <StyledText style={styles.sectionTitle}>Description</StyledText>
          <StyledText style={{ width: '80%', fontWeight: 400 }}>
            {data.description}
          </StyledText>
        </View>

这里的 data.description 是以下形式的文本： “呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜像这样的东西。容器应该打破这个词，但无论我如何尝试设置它的样式，这个词都不会响应。到达容器末尾时如何断字？

到目前为止，我已经尝试过使用 wordWrap、wordBreak、flex、flexWrap、flexGrow/Shrink 和 overflowWrap。似乎没有任何效果

【问题讨论】：

你有没有尝试过：word-wrap、word-break、overflow-wrap，......但哪个没用？
好点我会更新帖子
oups，毕竟，它似乎不可用：react-pdf.org/styling#valid-css-properties 你可能需要在处理之前拆分你的单词......但仍然应该包装真实的单词，尝试使用随机字母而不是单个重复的数千个时间 ;) gangnabalandehantrebdrtsartreacdetbgangnabalandehantrebdrtsartreacdetbgangnabalandehantrebdrtsartreacdetb 应该打破.. reactPdf 游乐场显示它有效：react-pdf.org/repl

标签： javascript css reactjs react-pdf

【解决方案1】：

在您希望分词的组件中尝试style={{ flex: 1 }}。

【讨论】：

【解决方案2】：

你应该用<Text> 覆盖你的标签，并赋予属性display:flex 和flexDirection:row。
在这些之后，您的文本将中断。

【讨论】：

可能你需要为你的文本标签设置一个宽度

【解决方案3】：

在{data.description}的样式中，尝试使用：

display: flex;
flex-direction:row;
flex-wrap: wrap;

在此处查找更多资源：link

【讨论】：