react-native-web: StyleSheet: word-break property to wrap long continuous strings

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

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

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;
}

1. 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>
  );

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

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.

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