约束文本到div内部2行并限制所有文本溢出？

Question

我需要有一个父div，其中一个子div包含嵌套文本。子div只能保留两行文本的空间，并且任何多余的文本都应像在textOverflow =省略号中那样被截断，并在末尾加上“ ...”。像这样的东西：

您能告诉我最有效的CSS和HTML吗？这是我想出的（不起作用）：

outerContainer: {
            padding: theme.spacing.unit * 0.5,
            display: 'block',
            maxHeight: "50px",
            flexGrow: 1,
            width: "100%",
            overflow: 'hidden',
            boxSizing: 'border-box',
    },
        innerContainer: {
            padding: theme.spacing.unit * 0.5,
            display: 'inline-block',
            width: "100%",
            height: 'auto',
            boxSizing: 'border-box',
            textOverflow: 'ellipsis',
            wordBreak: 'break-all',
            fontSize: "0.8rem",
            fontFamily: theme.typography.fontFamily,
        },
    ...
    <div className={classes.outerContainer}>
                    <div className={classes.innerContainer}>
                        <span>{"The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</span>
                    </div>
</div>

Answer 1

使用overflow: hidden;。基本上，超过div高度的任何东西都会被截断（隐藏）。确保您的身高为2行。

Overflow

.inner {
  border: 2px solid red;
  color: red;
  height: 40px;
  overflow: hidden;
}

<div class='outer'>
  <div class='inner'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
</div>