StyleSheet: word-break property to wrap long continuous strings

[joncursi]

Do you want to request a feature or report a bug?

Both.

What is the current behavior?

I have a very long string that I need to wrap to multiple lines, but it looks like this CSS property is not supported (word-break: all?).

When this component is rendered on native, the text wraps as desired:

When rendered on web, the text will not wrap to multiple lines, which causes the component to break out of the layout and create scrollbars.

Demo: https://cheddur-rgsymrxmda.now.sh/story/7NcMectnqEW4QivYj -> the cryptocurrency address.

If you shrink your viewport, you see:

• Browser: all
• React Native for Web (version): 0.1.16
• React (version): 16.2.0

[necolas]

You app doesn't load. Please can you create a simple test case from the glitch demo included in the issue template

[necolas]

Going to close this if there's no update soon

[necolas]

Please can you make a reduced test case on glitch

[dmeehan1968]

In case its of help, as it seems related, I had problems with getting a deeply nested Text node wrapping correctly. I got it working on Native, but couldn't figure it out on web without a lot of head scratch. This comment details what worked for me.

facebook/react-native#1438 (comment)

[necolas]

What's an example of code that produces the issue?

[export-mike]

@necolas it appears a single long string that doesn't have spaces causes this issue.

[necolas]

I'm just asking for someone to provide a reduced test case on codesandbox, as is mentioned as being required in the issue template. Help me to help you.

[airandfingers]

Hi @necolas, I'm seeing this issue now, though I could just be using Flexbox incorrectly.

Here's a reduced case (I could reduce it a bit more, but this shows the Flexbox context I'm operating in): https://codesandbox.io/embed/7wlorrx3p1

[airandfingers]

Update: This SO question pointed me to the answer: flexShrink: 1 fixes this.

Fixed reduced case: https://codesandbox.io/embed/7wlorrx3p1

[redefinered]

@airandfingers that is not the issue. I think just by reading it is pretty easy to understand. It's the long words that does not break and goes off the screen.

[redefinered]

to replicate the issue put this component in render <Text>ldjahflkasdjhflakshjflaksjhdflakshdjflaksjhdfalksjdhflaskdfhjlaskdfjhaslkdfhjlaskjdfhlaskjhdfajsdhflaksjdhflaskdfhalskdfhj</Text>

[redefinered]

@necolas

[redefinered]

It's too easy to understand, our brains are just too complicated.

[jtomaszewski]

So word-break isn't supported in react-native-web at this moment at all? I'm sure it should be supported. That's the only way to wrap long words (like explained above), besides CSS hyphenation maybe. Why is this closed?

[jtomaszewski]

This issue should be reopen. There should be a way to specify word-break: break-word on the web platform. That's the only way to force long words to be broken on the web. (Unless you know a better cross-browser-platform way to do it, I'm happy to learn. flex-shrink won't do it).

Currently our workaround is a bit troublesome and goes like this:

1. Add global <style> to our index.html with the following:

[word-break="break-word"] {
  word-break: break-word;
}

2. In js code, using ref and setNativeProps add the [word-break="break-word"] attribute to the element like this:

  const viewRef = useRef<View>(null);
  useEffect(() => {
    if (Platform.OS !== "web" || !containerRef.current) return;
    viewRef.current.setNativeProps({ ["word-break"]: "break-word" });
  }, [viewRef]);

  return (
    <View ref={viewRef}>...</View>
  );

[nicolaslazzos]

Or you can simply add { wordBreak: "break-word" } to the View style.

[srinivasan-fh]

1.Add global <style> to our index.html with the following:

<style>
#work-break-my-text-view {
   word-break: break-word;
}
</style>

2. Add testID in the View:
   <View testId='work-break-my-text-view'></View>