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

2022-02-19 18:48:54

方法一:适用于定宽高;

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

码农公寓

方法一:适用于定宽高;

方法二:适用于不定宽高,但有兼容性问题,多用在移动端;

相关文章