How to do word wrap with react-pdf

5
votes

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

3
javascriptcssreactjsreact-pdf
have you tried any of : word-wrap, word-break, overflow-wrap, ... and which did not work ? – G-Cyrillus
good point I'll update the post – Haq.H
oups, after all, it seems not avalaible : 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 : react-pdf.org/repl – G-Cyrillus

3 Answers

2
votes

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

0
votes

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

-1
votes

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

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

Find more resources here : link