Disabling hyphenation callback also breaks ellipsis

Question

I have a table of information where the first column is a username and the rest some product info.

Since usernames are one string with no spaces, I am trying to make it such that the usernames can be obfuscated with ellipsis when the string is longer than the container, whilst preserving the wrapping of the product detail cells...

I have managed to get the long single word string usernames to be ellipsis'd, but in the process of stopping word hyphenation it seems that the single word strings are not given ellipsis and allows overflow of the width-restricted area...

It seems that also applying overflow: 'hidden', whiteSpace: 'nowrap' does not help in this instance...

I understand that we can give Font.registerHyphenationCallback a custom callback, so it may be possible to differentiate between the two? However, I'm unsure of how that would look.

const Component = () => (
  <Document>
    <Page style={styles.body}>
      <Text style={{...styles.container, ...styles.ellipsis}}>Somereallylongstringhere</Text>
      <Text style={styles.container}>Some stringthatshouldbe hyphenated</Text>
    </Page>
  </Document>
);

/*
    Including the below:
        - Breaks whole words onto new lines without hyphenation
        - Stops ellipsis being applied to single string and causes overflow
        
    Excluding the below:
        - Hyphenates words onto new lines
        - Applies ellipsis to stop single string overflows
*/
// Font.registerHyphenationCallback(word => [word]);

const styles = StyleSheet.create({
  body: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
  },
  container: {
    width: '30%',
    backgroundColor: 'lightgrey',
    margin: 10
  },
  ellipsis: {
    maxLines: 1,
    textOverflow: 'ellipsis',
  }
});

ReactPDF.render(<Component />);

Disabling hyphenation callback also breaks ellipsis

0 Answers0