word-break combined with text-overflow

I have a container with a fixed width and text inside. I want the text to be able to word-break: break-word onto the second line, and then add text-overflow: ellipsis to the second line if the text is still too long. Is this possible to achieve?

For example, badgerbadgerbadgerbadgerbadger would be broken into two separate lines, and on the second line (since it's still too long), will have ellipsis at the end.

const container = {
    maxWidth: '140px',
}

const textStyle = {
    display: 'block',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    maxWidth: '140px',
    textOverflow: 'ellipsis',
    wordBreak: 'break-word', //doesn't work
}

render() {
    return (
        <div style={container}>
            <p style={textStyle}>badgerbadgerbadgerbadgerbadger</p>
        </div>
    )
}