6

我有一个按预期呈现的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 是以下形式的文本：“loooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg”这样的文本。容器应该打破这个词，但无论我如何尝试设置它的样式，这个词都不会响应。当碰到容器的末端时，我怎么能打破这个词？

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

4

3 回答 3

3

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

于 2021-11-16T07:36:13.607 回答
0

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

于 2021-02-03T13:48:50.543 回答
-1

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

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

在此处查找更多资源：链接

于 2021-11-16T07:48:16.263 回答