How to do word wrap with react-pdf

Question

I have a pdf that is rendering as expected except for an issue where when a very long word is included in the info for the page, instead of wrapping the word onto a newline the word just continues right out the container, off the page, out the door to who knows where.

This is the set-up for one of the containers that's creating this issue. The styles followed by the actual structure.

       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,
          },
        })

Below is the set-up of the section of the page

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

here data.description is text in the form of: "looooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg" something like this. The container should break the word but no matter how I try to style it the word doesn't respond. How can I break the word when hits the end of the container?

I've tried using, wordWrap, wordBreak, flex, flexWrap, flexGrow/Shrink and overflowWrap so far. Nothing seems to have any effect

have you tried any of : word-wrap, word-break, overflow-wrap, ... and which did not work ? — G-Cyrillus, Sep 23 '20 at 20:39
oups, after all, it seems not avalaible : https://react-pdf.org/styling#valid-css-properties you might need to split your words before processing ... but still should wrap real words, try using random letters instead a single repeated thousands of time ;) `gangnabalandehantrebdrtsartreacdetbgangnabalandehantrebdrtsartreacdetbgangnabalandehantrebdrtsartreacdetb` should break.. reactPdf playground shows it works : https://react-pdf.org/repl — G-Cyrillus, Sep 23 '20 at 21:40

score 6 · Answer 1 · answered Nov 16 '21 at 07:36

6

Try style={{ flex: 1 }} in the component you wish to word break.

answered Nov 16 '21 at 07:36

Hasan Sefa Ozalp

6,353
5
34
45

score 1 · Answer 2 · answered Oct 19 '22 at 16:52

1

I Solved this problem by adding a maxWidth property to my column style.

answered Oct 19 '22 at 16:52

Renato Damázio

199
1
4

Oooh!! I was adding it to the `Text` itself. Now it works, ty! – testing_22 Aug 10 '23 at 02:20

score 0 · Answer 3 · edited Feb 03 '21 at 22:05

0

You should cover your tags with <Text> and give attribute display:flex and flexDirection:row.
After these your text will break.

edited Feb 03 '21 at 22:05

סטנלי גרונן

2,917
23
46
68

answered Feb 03 '21 at 13:48

Ufuk Barış Tunca

1

1

probably you need to set a width o your text tag – Ufuk Barış Tunca Apr 17 '21 at 12:25

score 0 · Answer 4 · answered Feb 17 '23 at 15:22

This will split the text into word character and none word character chunks.

const WrapText = ({text}: {text?: string}) => (
  <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
    {text?.match(/\w+|\W+/g)?.map((seg, i) => (
      <Text key={i}>{seg}</Text>
    ))}
  </View>
);

score -2 · Answer 5 · answered Nov 16 '21 at 07:48

-2

In the style of {data.description}, try to use:

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

Find more resources here : link

answered Nov 16 '21 at 07:48

MagnusEffect

3,363
1
16
41

How to do word wrap with react-pdf

5 Answers5