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布局,我参考自这里

posted @ 2016-05-04 18:55  六石  阅读(2202)  评论(0编辑  收藏  举报