我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。
是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?
这是一个演示。
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。
什么好主意吗?
附注:没有JS解决方案，如果可能的话，纯CSS。
当前回答
看看这个纯css版本:http://codepen.io/martinwolf/pen/qlFdp
h2 { 显示:-webkit-box; max-width: 400 px; -webkit-line-clamp: 2; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; ｝ <h2> .</h2> .</h2> .</h2> .</h2> .</h2> .</h2> .
其他回答
下面的Css应该可以做到。
在第二行之后，文本将包含…
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
我的解决方案重用amcdnl之一，但我的后退包括使用文本容器的高度:
.my-caption h4 {
display: -webkit-box;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;/* Fallback for non-webkit */
}
下面是一个基于Mahan Lamei建议的材质ui褪色文本效果:
Create the overlay styleconst useStyles = makeStyles((theme) =>
createStyles({
fadeText: {
background: `linear-gradient( 180deg, #FFFFFF00, 0%, #FFFFFF06 30%, #FFFFFFFF 100%)`,
pointerEvents: "none",
}
})
)
<Grid container justify="center">
<Grid item xs={8} sm={6} md={4}>
<Box>
<Box
component="div"
overflow="hidden"
display="flex"
flexDirection="column"
fontFamily="Roboto"
fontSize="body1.fontSize"
fontWeight="fontWeightLight"
textAlign="justify"
height={['8rem']}
>
<Box display="flex">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est
laborum.
</Box>
</Box>
<Box
className={classes.fadeText}
display="block"
position="relative"
top="-4rem"
height="4rem"
/>
</Box>
</Grid>
</Grid>
工作演示:Codesandbox
MUI的默认主题使用缩写的CSS颜色(#FFF)，所以如果你想根据当前主题设置渐变，你需要用完整的六个字符变体来覆盖它们。
示例:使用主题设置渐变(例如基于亮/暗主题):
const useStyles = makeStyles((theme: Theme) =>
createStyles({
fadeText: {
background: `linear-gradient( 180deg, ${theme.palette.background.paper}00 0%, ${theme.palette.background.paper}06 30%, ${theme.palette.background.paper}FF 100%)`
}
})
)
编辑:更新包括托尼波格丹诺夫的建议
这是一个完全的hack，但它是有效的:
http://jsfiddle.net/2wPNg/
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: '...';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
它确实有问题....它可能会笨拙地切断一个字母，并且在响应式站点上可能会出现一些奇怪的结果。
限制为少数行几乎在所有浏览器中都可以工作，但省略号(3点)将不会在Firefox和IE中显示。演示- http://jsfiddle.net/ahzo4b91/1/
div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
