blog: 更新文章

docs/02.页面/20.CSS/30.文字在一行或多行时超出显示省略号.md

@@ -1,17 +1,17 @@
 ---
-title: 文字在一行或两行时超出显示省略号
+title: 文字在一行或多行时超出显示省略号
 date: 2020-02-23 15:07:08
 permalink: /pages/42b66999cc27dc25
-categories: 
+categories:
   - 页面
   - CSS
-tags: 
+tags:
   - null
-author: 
+author:
   name: xugaoyi
   link: https://github.com/xugaoyi
 ---
-# 文字在一行或两行时超出显示省略号
+# 文字在一行或多行时超出显示省略号
 
 ## 一行超出显示省略
 
@@ -31,7 +31,7 @@ text-overflow: ellipsis;
     .box-42b6{
         border: 1px solid #999;
         width: 200px;
-        
+
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -66,19 +66,36 @@ display: -webkit-box;
     .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>
 ```
 
 :::
 
+## JS判断是否显示了省略号
+有时候我们需要知道是否已经溢出，显示了省略号，可以用到`clientHeight`和`scrollHeight`的知识：
+``` js
+let cHeight = noWrapDiv.clientHeight;
+let sHeight = noWrapDiv.scrollHeight;
+if (sHeight > cHeight) {
+      console.log("已经溢出显示省略号");
+} else {
+      console.log("没有溢出");
+}
+```
+> 这里可以用于判断是否溢出显示展开收缩按钮。
 
+#### 知识点拓展
+scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。
 
+clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。
+
+offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。