CSS 省略号（单行省略号、多行省略号）

最新推荐文章于 2024-01-24 15:18:46 发布

ares5k

最新推荐文章于 2024-01-24 15:18:46 发布

阅读量7.6w

点赞数 16

分类专栏： # H5C3 文章标签： html css

本文链接：https://blog.csdn.net/Ares5kong/article/details/115522730

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

单行省略号

用法：

为已有宽度的盒子添加属性:

属性	取值	解释
white-space	nowrap	让文字在一行内显示, 不换行
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替

效果:

动图中代码分析：

动图内容可以分成四部分:

① 初始状态, 文字内容超过<div>宽度所以会自动换行

② 添加 white-space: nowrap; 让内容在一行显示，不换行，但是发生了文字溢出

③ 添加 overflow: hidden; 让内容的溢出部分隐藏。

④ 添加 text-overflow: ellipsis; 如果溢出部分是文字，那么就让溢出的前一个文字显示省略号。

多行省略号

多行省略号只能支持 webkit 内核浏览器, IE系就不兼容，像京东这种大型互联网电商网站，他们也是用了这种做法，IE系浏览器京东选择了放弃兼容, 只是显示固定行数, 并没有以省略号结尾。

用法：

为已有宽度的盒子添加属性:

属性	取值	解释
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替
-webkit-line-clamp	数字	控制可以显示的行数
display-webkit-box	-webkit-box	暂时还不能很好的理解, 等以后通透了再回来补上
-webkit-box-orient	vertical	暂时还不能很好的理解, 等以后通透了再回来补上

代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 32px;
      font-size: 14px;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      border: 1px solid black;
    }
  </style>
</head>
<body>
<div>CSS内容超出部分显示省略号，这个是多行文字内容显示省略号的情况</div>
</body>
</html>

运行：