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

一行超出显示省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
1
2
3

:::demo [vanilla]

<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样式的值决定。

:::demo [vanilla]

<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：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
欢迎访问我的博客地址 : 博客地址，也可以手机扫码观看。
在这里插入图片描述

相关阅读:
eNSP学习——连接RIP与OSPF网络、默认路由
Spring Boot工程开发流程
java计算机毕业设计在线招生系统源程序+mysql+系统+lw文档+远程调试
[附源码]计算机毕业设计基于springboot的文成考研培训管理系统
线扫相机DALSA软件开发套件有哪些
k8s集群 ceph rbd 存储动态扩容
算法修炼-动态规划之斐波那契数列模型
9月6日关键点检测学习笔记——人脸和手部特征点检测
环形缓冲区、链表及二叉树示例
配置和优化您的企业内容管理（ECM）解决方案

原文地址：https://blog.csdn.net/qq_43699122/article/details/125531949