断字与文本溢出相结合

Question

我有一个具有固定宽度和内部文本的容器。我希望文本能够word-break: break-word到第二行，然后text-overflow: ellipsis如果文本仍然太长，则添加到第二行。这有可能实现吗？

例如，badgerbadgerbadgerbadgerbadger将分成两行，在第二行（因为它仍然太长）末尾有省略号。

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

Answer 1

您可以做到这一点，但不像一行文本那么容易。

\n\n

有几种方法可以做到这一点。

\n\n

一探究竟：

\n\n

带省略号的纯 CSS 多行文本

\n\n

-webkit-line-clamp: xx(lines to show);\n

\n\n

和

\n\n

Line Clampin\xe2\x80\x99（截断多行文本）

\n