html单行（多行）超出省略并显示省略号，案例不能用回来砍我！

最新推荐文章于 2023-07-16 14:28:43 发布

碉堡飞哥

最新推荐文章于 2023-07-16 14:28:43 发布

阅读量1k

点赞数

分类专栏： html 前端 css

本文链接：https://blog.csdn.net/qq_27064559/article/details/81739463

版权

前端同时被 3 个专栏收录

183 篇文章 3 订阅

订阅专栏

css

37 篇文章 1 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

实例效果
这里写图片描述

html：

<div class="ell1">1111111111111111111111111111111111111111111111111</div>
<div class="ell2">222222222222222222222222222222222222</div>

css：

.ell1{      /*单行省略*/
    width: 100px;
    height: 100px;
    overflow: hidden; /*超过区域就隐藏*/
    white-space: nowrap;/*规定段落中的文本不进行换行*/
    text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
}
.ell2{      /*多行省略*/
    width: 100px;
    height: 34px;
    overflow: hidden;   /*超过区域就隐藏*/
    display: -webkit-box; /*-webkit- 是浏览器前缀，兼容旧版浏览器的 即为display: box;*/
    -webkit-line-clamp: 2;  /*限制在一个块元素显示的文本的行数*/
    -webkit-box-orient: vertical; /*box-orient 属性规定框的子元素应该被水平或垂直排列。horizontal：水平，vertical：垂直*/
    word-break: break-all; /*word-break 属性规定自动换行的处理方法 ，break-all：允许在单词内换行。*/
}