Flex layout and character tokenizing don't interact as expected without whitespace

[meisterz39]

I'm using a button with a flex layout whose label is a comma delimited list of other labels. I've using the characters tokenize strategy, but the only way to get the word-wrap to correctly truncate the text is to include a whitespace between those labels. This seems to be due to the wordWrap: 'break-word' styling is applied regardless of tokenizing strategy (https://github.com/parsable/react-truncate-markup/blob/master/src/index.js#L322) whereas a 'characters' tokenizing strategy ought to use 'anywhere' instead.

To Reproduce
https://codesandbox.io/s/truncatemarkup-demo-z3zq4?file=/index.js

[patrik-piskay]

Hi @meisterz39, to unblock you you can set your own styles on the parent element (span.labels in your case) to overwrite the library styles. If I were to edit your example to use

<span className={"labels"} style={{ overflowWrap: 'anywhere' }}>

it works for flex containers again.