react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

whiteSpace property not included in styles

Open SrividyaKK opened this issue 4 years ago • 5 comments

I wanted to add the whiteSpace: 'pre-wrap' property to the styles for my text component and saw that react-pdf doesn't support that. Please support the available native CSS styles. Thanks.

SrividyaKK avatar Jan 19 '21 14:01 SrividyaKK

Same here, needing ( whiteSpace: 'nowrap' ) to force text not to break.

laazaz avatar May 12 '21 15:05 laazaz

The workaround I am using is to replace the content spaces with tabs. example: content.replaceAll(' ', '\t')

stefanofa avatar Sep 30 '21 09:09 stefanofa

You could achieve the whitespace: 'nowrap' effect by using Font.registerHyphenationCallback(word => [word]); Documentation here: https://react-pdf.org/fonts#registerHyphenationCallback :)

VladimirEcotree avatar Jan 07 '22 10:01 VladimirEcotree

  1. as a hacky trick you can use content.replace(" ", "\u00A0"), if need just prevent wrapping the content.
  2. or using numberOfLines prop for Text component, this prop is commonly used with ellipsizeMode.

avet-m avatar Jan 23 '24 22:01 avet-m

To achieve the whiteSpace: 'pre-wrap' effect you can use the following workaround:

Before

return <Text styles={{ whiteSpace: 'pre-wrap' }}>{description}</Text>

After

let output = null
const lines = description.split('\n')
output = lines.map((line, index) => {
  return <Text key={`line_${index}`}>{line || <>&nbsp;</>}</Text>
})

return output

caweidmann avatar Sep 10 '24 15:09 caweidmann