### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
    - 一行超出显示省略
    - 两行（多行）超出显示省略号
    - JS判断是否显示了省略号
      - 知识点拓展
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2020-02-23
目录

# 文字在一行或多行时超出显示省略号

# # 文字在一行或多行时超出显示省略号

## # 一行超出显示省略

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

1
2
3

    <html>
       <div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
    </html>
    <style>
        .box-42b6{
            border: 1px solid #999;
            width: 200px;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13

## # 两行（多行）超出显示省略号

    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

1
2
3
4
5
6

显示的行数由`line-clamp`样式的值决定。

    <html>
       <div class="box2-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
    </html>
    <style>
        .box2-42b6{
            border: 1px solid #999;
            width: 200px;

            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

          }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

## # JS判断是否显示了省略号

有时候我们需要知道是否已经溢出，显示了省略号，可以用到`clientHeight`和`scrollHeight`的知识：

    let cHeight = noWrapDiv.clientHeight;
    let sHeight = noWrapDiv.scrollHeight;
    if (sHeight > cHeight) {
          console.log("已经溢出显示省略号");
    } else {
          console.log("没有溢出");
    }

1
2
3
4
5
6
7

> 这里可以用于判断是否溢出显示展开收缩按钮。

#### # 知识点拓展

scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。

clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。

offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
「布局技巧」图片未加载前自动撑开元素高度
从box-sizing属性入手，了解盒子模型

← 「布局技巧」图片未加载前自动撑开元素高度 从box-sizing属性入手，了解盒子模型→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式