CSS 控制单行文本和多行文本的显示区域不够存放时使用省略号...来替代的做法

来源：互联网发布：都有哪些美食kol 知乎编辑：程序博客网时间：2024/05/17 20:01

1、单行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：

       .singleLine{        width:120px;background:#0ff;                overflow:hidden;/*多余文字隐藏*/white-space:nowrap;/*不换行*/text-overflow:ellipsis;/*多余文字使用"..."代替*/ }

2、多行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：

 .multiLine{    width:120px;background:#0ff;overflow:hidden;/*多余文字隐藏*/text-overflow:ellipsis;/*多余文字使用"..."代替*/display:-webkit-box;/*盒子模型*/-webkit-line-clamp:3;/*设置在第三行显示"..." */-webkit-box-orient:vertical;/*竖直排列*/ }

测试代码及效果图如下所示：

<html>  <style type="text/css">     .singleLine{        width:120px;background:#0ff;                overflow:hidden;/*多余文字隐藏*/white-space:nowrap;/*不换行*/text-overflow:ellipsis;/*多余文字使用"..."代替*/ } .multiLine{        width:120px; /** 可以不指定高度 */background:#0ff;overflow:hidden;/*多余文字隐藏*/text-overflow:ellipsis;/*多余文字使用"..."代替*/display:-webkit-box;/*盒子模型*/-webkit-line-clamp:3;/*设置在第三行显示"..." ，必须指定，不然没“...”效果*/-webkit-box-orient:vertical;/*竖直排列*/ }  </style>  <body>     <div class="singleLine">    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 </div> <hr/> <div class="multiLine">    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 </div>  </body></html>

阅读全文

0 0