<分区>
html - 将文本限制在 div 内的 2 行并限制所有文本溢出？
我需要有一个父 div，里面有一个包含嵌套文本的子 div。子 div 应该只允许 2 行文本的空间，并且任何额外的文本都应该像在 textOverflow=ellipsis 中一样被切断，最后带有“...”。是这样的:
你能告诉我最有效的 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>
最佳答案
使用溢出:隐藏；。基本上，任何超过 div 高度的东西都会被截断(隐藏)。确保您拥有适合您的 2 行高度。
.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>关于html - 将文本限制在 div 内的 2 行并限制所有文本溢出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54976867/