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

Question

我有一个按预期呈现的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。似乎没有任何效果

Answer 1

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