Wrapping text and cutting off a single word if it's too long

[tlhinman]

I originally posted this as an Issue and got some help there, but the thread has been closed and my follow-up is probably better suited for this forum anyway.

Here's the original thread: #456
My follow-up is here: #456 (comment)

To summarize, I have a row with a small picture, a title, and an info button aligned to the left, and a button aligned to the right. As the row shrinks, I wanted the title wrap to be the first thing that happens. That was successfully addressed, but now I'm not sure how to contain a line if its single word is too long for the space. Two examples (one extreme) of what I'm trying to fix:

Here's a slightly abbreviated version of the script as it is now:

<View
  direction='row'
  align='center'
  width='100%'
  wrap={false}
  justify='space-between'
  className='wrapper-class'  // Has 'flex: 1 0 0' and 'min-width: 0'
>
  <ImageElement/>
  <View grow direction='row' align='center'>
    <View.Item attributes={{ style: { flexShrink: 1 } }}>
      <Link to='myUrl'>
        <Text maxLines={3}>
          Title
        </Text>
      </Link>
    </View.Item>
    <View.Item grow attributes={{ style: { minWidth: 'auto' } }}>
      <InfoButtonPopoverElement/>
    </View.Item>
  </View>
  <FollowButton/>
</View>

Thanks!

[blvdmitry]

I think you can look into adding overflow-wrap to the text with a className or attributes:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text#breaking_long_words

[tlhinman]

Thanks again Dmitry! I could have sworn I already tried all of this, but adding word-break: break-word gives me what I want. Cheers!