欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css实现超出文本省略号的两个方法

程序员文章站 2022-04-22 13:46:01
...
方法一:适用于定宽高;
 <!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布局,我参考自这里