css实现超出文本省略号的两个方法
方法一:适用于定宽高;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.a{width:400px;height:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>
<body>
<p class="a">有一次他被她跟烦了,板着脸问:“赵默笙,你为什么老是跟着我?”她睁大眼睛:“以琛,是你笨还是我笨,哎,你那么聪明,一定是我笨了,我怎么这么失败,追了半天人家都不知道我在干什么!” 那时候他就老是要让她等。有一次她等久了朝他发脾气。“我都数到九百九十九了,你才来!下次要是让我数到一千我就再也不理你!”结果又一次,他被系里临时抓去开会,冗长的会议终于完了后他跑去,她居然还在这次她等得脾气都没了,只是委委屈屈地看着他说:“以琛,我都数了好几个九百九十九了。”而这七年来,他又多少次数九百九十九?不是没想过放弃,只是始终没办法数到一千。</p>
</body>
</html>
-
overflow:hidden
:超出隐藏 -
white-space:nowrap
:强制不换行 -
text-overflow:ellipsis
:超出省略号代替;
方法二:适用于不定宽高,但有兼容性问题,多用在移动端;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.b {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
</style>
</head>
<body>
<p class="b">有一次他被她跟烦了,板着脸问:“赵默笙,你为什么老是跟着我?”她睁大眼睛:“以琛,是你笨还是我笨,哎,你那么聪明,一定是我笨了,我怎么这么失败,追了半天人家都不知道我在干什么!” 那时候他就老是要让她等。有一次她等久了朝他发脾气。“我都数到九百九十九了,你才来!下次要是让我数到一千我就再也不理你!”结果又一次,他被系里临时抓去开会,冗长的会议终于完了后他跑去,她居然还在这次她等得脾气都没了,只是委委屈屈地看着他说:“以琛,我都数了好几个九百九十九了。”而这七年来,他又多少次数九百九十九?不是没想过放弃,只是始终没办法数到一千。</p>
</body>
</html>
-
display:-webkit-box
:box-flex布局 -
-webkit-box-orient:vertical
:垂直排列子元素 -
-webkit-line-clamp:3
:显示几行 -
overflow:hidden
:超出隐藏;
关于box-flex布局,我参考自这里