css 文本溢出隐藏显示省略号

最新推荐文章于 2024-09-19 08:00:00 发布

科罗拉多

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量351

点赞数

文章标签： html css3 javascript css

本文链接：https://blog.csdn.net/guo_2019/article/details/113947621

版权

记忆了好几次时间一长就忘了，做个笔记喽

1单行文本溢出隐藏

<style>
     .box {
         width: 200px;
         border: 1px solid red;   
         overflow: hidden;
         text-overflow:ellipsis;
         white-space: nowrap;  
         /* 行内元素(span)的话要转块元素 display: block;*/    
     }
 </style>
 <div class="box">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</div>

在这里插入图片描述
2.多行文本溢出

<style>
     .box {
            width: 200px;
            border: 1px solid red;   
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 行数 */
            -webkit-line-clamp: 3;
            overflow: hidden;
            /* 行内元素(span)的话要转块元素 display: block;*/
        }
 </style>
 <div class="box">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习</div>