html css文字用省略号显示

最新推荐文章于 2024-06-09 17:43:42 发布

qq_46063760

最新推荐文章于 2024-06-09 17:43:42 发布

阅读量349

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_46063760/article/details/125179870

版权

1.单行省略号

 <div class="one">
       哈哈哈哈哈哈哈哈哈哈或或或哈或或哈或哈哈或或哈或哈奥或哈哈哈或哈哈
   </div>

.one{
    height: 80px;
    width: 150px;
    background-color: pink;
   /* white-space: normal;  */
   white-space: nowrap;
   /* 强制一行内显示，不允许换行 */
   overflow: hidden;
   /* 溢出部分隐藏 */
   text-overflow: ellipsis;
   /* 文字溢出用省略号显示 */
     
}

多行省略

 <div class="text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

.text{
    height: 65px;
    width: 150px;
    background-color:yellowgreen;
    overflow: hidden;
   /* 溢出部分隐藏 */
   text-overflow: ellipsis;
   /* 文字溢出用省略号显示 */
   display: -webkit-box;
   /* 弹性伸缩盒子模型 */
   -webkit-line-clamp: 3;
   /* 设置或检索伸缩盒子对象的子元素的排列方式 */
   -webkit-box-orient: vertical;

}
/* 兼容性不好，IE不支持 */