因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離

文來源于：程序員成長指北；作者：去偽存真
如有侵權，聯系刪除

背景

最近在項目中要實現一個拖拽頭像的移動效果，一直對JS Dom拖拽這一塊不太熟悉，甚至在網上找一個示例，都看得云里霧里的，發現遇到最大的攔路虎就是JS Dom各種各樣的距離，讓人頭暈眼花，看到一個距離屬性，大腦中的印象極其模糊，如同有一團霧一樣，不知其確切含義。果然是基礎不牢，地動山搖。今天決心夯實一下基礎，親自動手驗證一遍dom各種距離的含義。

JS Dom各種距離釋義

下面我們進入正題, 筆者不善于畫圖, 主要是借助瀏覽器開發者工具，通過獲取的數值給大家說明一下各種距離的區別。

第一個發現 window.devicePixelRatio 的存在

本打算用截圖軟件丈量尺寸，結果發現截圖軟件顯示的屏幕寬度與瀏覽器開發者工具獲取的寬度不一致，這是為什么呢?

截圖軟件顯示的屏幕寬度是1920

window.screen.width顯示的屏幕寬度是1536

這是怎么回事？原來在PC端，也存在一個設備像素比的概念。它告訴瀏覽器一個css像素應該使用多少個物理像素來繪制。要說設備像素比，得先說一下像素和分辨率這兩個概念。

像素屏幕中最小的色塊，每個色塊稱之為一個像素（Pixel）

分辨率 分辨率=屏幕水平方向的像素點數 * 屏幕垂直方向的像素點數; 另外說一下,關于分辨率有多種定義,可以細分為顯示分辨率[1]、圖像分辨率[2]、打印分辨率[3]和掃描分辨率[4]等，此處是指顯示分辨率。

設備像素比

設備像素比的定義是：

window.devicePixelRatio =顯示設備物理像素分辨率顯示設備CSS像素分辨率\frac{顯示設備物理像素分辨率}{顯示設備CSS像素分辨率}顯示設備CSS像素分辨率顯示設備物理像素分辨率

根據設備像素比的定義, 如果知道顯示設備橫向的css像素值，根據上面的公式，就能計算出顯示設備橫向的物理像素值。

顯示設備寬度物理像素值 = window.screen.width * window.devicePixelRatio;

設備像素比在我的筆記本電腦上顯示的數值是1.25, 代表一個css邏輯像素對應著1.25個物理像素。

我前面的公式計算了一下，與截圖軟件顯示的像素數值一致。這也反過來說明，截圖軟件顯示的是物理像素值。

window.devicePixelRatio 是由什么決定的 ?

發現是由筆記本電腦屏幕的縮放設置決定的，如果設置成100%, 此時window.screen.width與筆記本電腦的顯示器分辨率X軸方向的數值一致,都是1920(如右側圖所示), 此時屏幕上的字會變得比較小,比較傷視力。

邏輯像素是為了解決什么問題?

邏輯像素是為了解決屏幕相同，分辨率不同的兩臺顯示設備，顯示同一張圖片大小明顯不一致的問題。比如說兩臺筆記本都是15英寸的，一個分辨率是1920*1080,一個分辨率是960*540, 在1920*1080分辨率的設備上，每個格子比較小，在960*540分辨率的設備上，每個格子比較大。一張200*200的圖片，在高分率的設備上看起來會比較小，在低分辨率的設備上，看起來會比較大。觀感不好。為了使同樣尺寸的圖片，在兩臺屏幕尺寸一樣大的設備上，顯示尺寸看起來差不多一樣大，發明了邏輯像素這個概念。

規定所有電子設備呈現的圖片等資源尺寸統一用邏輯像素表示。然后在高分辨率設備上，提高devicePixelRatio, 比如說設置1920*1080設備的devicePixelRatio(dpr)等于2, 一個邏輯像素占用兩個格子,在低分辨率設備上，比如說在960*540設備上設置dpr=1, 一個css邏輯像素占一個格子, 這樣兩張圖片在同樣的設備上尺寸大小就差不多了。通常設備上的邏輯像素是等于物理像素的，在高分辨率設備上，物理像素是大于邏輯像素數量的。由此也可以看出，物理像素一出廠就是固定的，而設備的邏輯像素會隨著設備像素比設置的值不同而改變。但圖片的邏輯像素值是不變的。

document.body、document.documentElement和window.screen的寬高區別

差別是很容易辨別的，如下圖所示：

document.body -- body標簽的寬高
document.documentElement -- 網頁可視區域的寬高(不包括滾動條)
window.screen -- 屏幕的寬高

網頁可視區域不包括滾動條

如下圖所示，截圖時在未把網頁可視區域的滾動條高度計算在內的條件下, 截圖工具顯示的網頁可視區域高度是168, 瀏覽器顯示的網頁可視區域的高度是167.5, 誤差0.5，由于截圖工具是手動截圖，肯定有誤差，結果表明，網頁可視區域的高度 不包括滾動條高度。寬度同理。

屏幕和網頁可視區域的寬高區別如下：

屏幕寬高是個固定值，網頁可視區域寬高會受到縮放窗口影響。

屏幕高度和屏幕可用高度區別如下：

屏幕可用高度=屏幕高度-屏幕下方任務欄的高度，也就是：

window.screen.availHeight = window.screen.height - 系統任務欄高度

scrollWidth, scrollLeft, clientWidth關系

scrollWidth(滾動寬度,包含滾動條的寬度)=scrollLeft(左邊卷去的距離)+clientWidth(可見部分寬度); 
// 同理 
scrollHeight(滾動高度,包含滾動條的高度)=scrollTop(上邊卷去的距離)+clientHeight(可見部分高度);

需要注意的是，上面這三個屬性，都取的是溢出元素的父級元素屬性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父級元素是html(document.documentElement)。另外，

溢出元素的寬度(document.body.scrollWidth）=父級元素的寬度(document.documentElement.scrollWidth) - 滾動條的寬度(在谷歌瀏覽器上滾動條的寬度是19px)

<!DOCTYPE html> 
<html lang="en"> 
  <head>     
    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">     
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->     
    <title>JS Dom各種距離</title>     
    <style>         
      html, body {             
        margin: 0;         
      }         
      body {             
        width: 110%;             
        border: 10px solid blue;         
      }         
      .rect {             
        height: 50px;             
        background-color: green;         
      }     
    </style> 
  </head> 
  <body>     
    <div id="rect" class="rect"></div> 
  </body> 
</html>

元素自身和父級元素的scrollWidth和scrollLeft關系?

從下圖可以看出:

元素自身沒有X軸偏移量，元素自身的滾動寬度不包含滾動條
父級元素有X軸便宜量, 父級元素滾動寬度包含滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 600px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
</body>
<script>
</script>
</html>

offsetWidth和clientWidth的關系?

offsetWidth和clientWidth的共同點是都包括自身寬度+padding , 不同點是offsetWidth包含border。

如下圖所示:

rect元素的clientWidth=200px(自身寬度) + 20px(左右padding) = 220px
rect元素的offsetWidth=200px(自身寬度) + 20px(左右padding) + 2px(左右boder) = 222px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">111111111111111111111111111111111111111111111111</div>
</body>
<script>


</script>

</html>

event.clientX，event.clientY, event.offsetX 和 event.offsetY 關系

代碼如下，給rect元素添加一個mousedown事件，打印出事件源的各種位置值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        html,
        body {
            margin: 0;
        }

        body {
            width: 200px;
            padding: 10px;
            border: 10px solid blue;
        }

        .rect {
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div id="rect" class="rect"></div>


</body>
<script>
    const rectDom = document.querySelector('#rect');

    rectDom.addEventListener('mousedown', ({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY }) => {
        console.log({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY });
    })
</script>

</html>

我們通過y軸方向的高度值,了解一下這幾個屬性的含義。綠色塊的高度是50px, 我們找個特殊的位置（綠色塊的右小角）點擊一下，如下圖所示:

offsetY=49, 反推出這個值是相對于元素自身的頂部的距離
clientY=69, body標簽的border-top是10，paiding是10, 反推出這個值是相對網頁可視區域頂部的距離
screenY=140，目測肯定是基于瀏覽器窗口，

所以它們各自的含義,就很清楚了。

事件源屬性	表示的距離
event.offsetX、event.offsetY	鼠標相對于事件源元素（srcElement）的X,Y坐標，
event.clientX、event.clientY	鼠標相對于瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動偏移量。
event.pageX、event.pageY	鼠標相對于文檔坐標的x,y坐標，文檔坐標系坐標＝視口坐標系坐標＋滾動的偏移量
event.screenX、event.screenY	鼠標相對于用戶顯示器屏幕左上角的X,Y坐標

pageX和clientX的關系

我們點擊下圖綠色塊的右下角，把pageX和clientX值打印出來。如下圖所示:

可視區域的寬度是360，點擊點的clientX=359(由于是手動點擊,有誤差也正常)
水平方向的偏移量是56
pageX是415，360+56=416,考慮到點擊誤差，可以推算出 ele.pageX = ele.clientX + ele.scrollLeft

getBoundingClientRect獲取的top,bottom,left,right的含義

從下圖可以看出，上下左右這四個屬性，都是相對于瀏覽器可視區域左上角而言的。

從下圖可以看出，當有滾動條出現的時候，right的值是359.6，而不是360+156(x軸的偏移量), 說明通過getBoundingClientRect獲取的屬性值是不計算滾動偏移量的，是相對瀏覽器可視區域而言的。

movementX和movementY的含義?

MouseEvent.movementX/movementX是一個相對偏移量。返回當前位置與上一個mousemove事件之間的水平/垂直距離。以當前位置為基準, 鼠標向左移動, movementX就是負值，向右移動，movementX就是正值。鼠標向上移動,movementY就是負值，向下移動，movementY就是正值。數值上，它們等于下面的計算公式。這兩個值在設置拖拽距離的時候高頻使用，用起來很方便。

curEvent.movementX = curEvent.screenX - prevEvent.screenX; 
curEvent.movementY = curEvent.screenY - prevEvent.screenY;

想移動元素，mouse和drag事件怎么選?

mouse事件相對簡單，只有mousedown(開始),mousemove(移動中),mouseup(結束)三種。與之對應的移動端事件是touch事件，也是三種touchstart(手指觸摸屏幕), touchmove(手指在屏幕上移動), touchend(手指離開屏幕)。

相對而言, drag事件就要豐富一些。

被拖拽元素事件

事件名	觸發時機	觸發次數
dragstart	拖拽開始時觸發一次	1
drag	拖拽開始后反復觸發	多次
dragend	拖拽結束后觸發一次	1

目標容器事件

事件名	觸發時機	觸發次數
dragenter	被拖拽元素進入目標時觸發一次	1
dragover	被拖拽元素在目標容器范圍內時反復觸發	多次
drop	被拖拽元素在目標容器內釋放時(前提是設置了dropover事件)	1

想要移動一個元素，該如何選擇這兩種事件類型呢？選擇依據是:

類型	選擇依據
mouse事件	1. 要求絲滑的拖拽體驗 2. 無固定的拖拽區域 3. 無需傳數據
drag事件	1. 拖拽區域有范圍限制 2. 對拖拽流暢性要求不高 3. 拖拽時需要傳數據

現在讓我們寫個拖拽效果

光說不練假把式, 掃清了學習障礙后，讓我們自信滿滿地寫一個兼容PC端和移動端的拖動效果。不積跬步無以至千里，幻想一口吃個胖子，是不現實的。這一點在股市上體現的淋漓盡致。都是有耐心的人賺急躁的人的錢。所以，要我們沉下心來，打牢基礎，硬骨頭啃一點就會少一點，步步為營，穩扎穩打，硬骨頭也會被啃成渣。

<!DOCTYPE html>
<html lang="en">

<head>
        
    <meta charset="UTF-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    <title>移動小鳥</title>
    <style>
        body {
            margin: 0;
            font-size: 0;
            position: relative;
            height: 100vh;
        }

        .bird {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: grab;
            z-index: 10;
        }
    </style>
</head>

<body>
    <img class="bird" src="./bird.png" alt="" />  
</body>

<script>
    let evtName = getEventName();
    // 鼠標指針相對于瀏覽器可視區域的偏移
    let offsetX = 0, offsetY = 0;
    // 限制圖片可以X和Y軸可以移動的最大范圍，防止溢出
    let limitX = 0, limitY = 0;

    // 確保圖片加載完
    window.onload = () => {
        const bird = document.querySelector(".bird");
        const { width, height } = bird;

        limitX = document.documentElement.clientWidth - width;
        limitY = document.documentElement.clientHeight - height;

        bird.addEventListener(evtName.start, (event) => {
            // 監聽鼠標指針相對于可視窗口移動的距離
            // 注意移動事件要綁定在document元素上，防止移動過快,位置丟失
            document.addEventListener(evtName.move, moveAt);
        });

        // 鼠標指針停止移動時,釋放document上綁定的移動事件
        // 不然白白產生性能開銷
        document.addEventListener(evtName.end, () => {
            document.removeEventListener(evtName.move, moveAt);
        })

        // 移動元素
        function moveAt({ movementX, movementY }) {
            const { offsetX, offsetY } = getSafeOffset({ movementX, movementY });

            window.requestAnimationFrame(() => {
                bird.style.cssText = `left:${offsetX}px;top:${offsetY}px;`;
            });
        };
    };

    // 獲取安全的偏移距離
    const getSafeOffset = ({ movementX, movementY }) => {
        // //距上次鼠標位置的X,Y方向的偏移量
        offsetX += movementX;
        offsetY += movementY;

        // 防止拖拽元素被甩出可視區域
        if (offsetX > limitX) {
            offsetX = limitX;
        }

        if (offsetX < 0) {
            offsetX = 0;
        }

        if (offsetY > limitY) {
            offsetY = limitY;
        }

        if (offsetY < 0) {
            offsetY = 0;
        }

        // console.log({ movementX, movementY, offsetX, offsetY });
        return { offsetX, offsetY };
    }

    // 區分是移動端還是PC端移動事件
    function getEventName() {
        if ("ontouchstart" in window) {
            return {
                start: "touchstart",
                move: "touchmove",
                end: "touchend",
            };
        } else {
            return {
                start: "pointerdown",
                move: "pointermove",
                end: "pointerup",
            };
        }
    }
</script>

</html>

彩蛋

在chrome瀏覽器上發現一個奇怪的現象,設置的border值是整數，計算出來的值卻帶有小數

而當border值是4的整數倍的時候,計算值是正確的

看了這篇文章[5]解釋說，瀏覽器可能只能渲染具有整數物理像素的border值，不是整數物理像素的值時，計算出的是近似border值。這個解釋似乎講得通，在設備像素比是window.devicePixelRatio=1.25的情況下, 1px對應的是1.25物理像素, 1.25*4的倍數才是整數，所以設置的邏輯像素是4的整數倍數，顯示的渲染計算值與設置值一致,唯一讓人不理解的地方，為什么padding,margin，width/height卻不遵循同樣的規則。

參考資料

[1] https://baike.baidu.com/item/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87/3431933?fromModule=lemma_inlink

[2] https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E5%88%86%E8%BE%A8%E7%8E%87/872374?fromModule=lemma_inlink

[3] https://baike.baidu.com/item/%E6%89%93%E5%8D%B0%E5%88%86%E8%BE%A8%E7%8E%87/9560832?fromModule=lemma_inlink

[4] https://baike.baidu.com/item/%E6%89%AB%E6%8F%8F%E5%88%86%E8%BE%A8%E7%8E%87/7122498?fromModule=lemma_inlink

[5] https://www.w3.org/TR/CSS22/cascade.html#specified-value

行文本展開收起是一個很常見的交互，如下圖演示

實現這一類布局和交互難點主要有以下幾點

位于多行文本右下角的“展開收起”按鈕
“展開”和“收起”兩種狀態的切換
當文本不超過指定行數時，不顯示“展開收起”按鈕

說實話，之前單獨看這個布局，即使借助 JavaScript 也不是一件容易的事?。ㄐ枰嬎阄淖謱挾葎討B截取文本，vue-clamp 就是這么做的），更別說下面的交互和判斷邏輯了，不過經過我的一番琢磨，其實純 CSS 也能完美實現的，下面就一步一步來看看如何實現吧~

一、位于右下角的“展開收起”按鈕

很多設計同學都喜歡這樣的設計，把按鈕放在右下角，和文本混合在一起，而不是單獨一行，視覺上可能更加舒適美觀。先看看多行文本截斷吧，這個比較簡單

多行文本截斷

假設有這樣一個 html 結構

<div class="text">
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

多行文本超出省略大家應該很熟悉這個了吧，主要用到用到 line-clamp ，關鍵樣式如下

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

右下角環繞效果

提到文本環繞效果，一般能想到 浮動 float ，沒錯，千萬不要以為浮動已經是過去式了，具體的場景還是很有用的。比如下面放一個按鈕，然后設置浮動

<div class="text">
  <button class="btn">展開</button>
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

.btn {
  float: left;
  /*其他裝飾樣式*/
}

如果設置右浮動

.btn {
  float: right;
  /*其他裝飾樣式*/
}

這時已經有了環繞的效果了，只是位于右上角，如何將按鈕移到右下角呢？先嘗試一下 margin

.btn {
  float: right;
  margin-top: 50px;
  /*其他裝飾樣式*/
}

可以看到，雖然按鈕到了右下角，但是文本卻沒有環繞按鈕上方的空間，空出了一大截，無能為力了嗎？

雖然 margin 不能解決問題，但是整個文本還是受到了浮動按鈕的影響，如果有多個浮動元素會怎么樣呢？這里用偽元素來 ::before 代替

.text::before{
  content: '';
  float: right;
  width: 10px;
  height: 50px;/*先隨便設置一個高度*/
  background: red
}

現在按鈕到了偽元素的左側，如何移到下面呢？很簡單，清除一下浮動 clear: both; 就可以了

.btn {
  float: right;
  clear: both;
  /*其他裝飾樣式*/
}

可以看到，現在文本是完全環繞在右側的兩個浮動元素了，只要把紅色背景的偽元素寬度設置為0（或者不設置寬度，默認就是 0），就實現了右下角環繞的效果

.text::before{
  content: '';
  float: right;
  width: 0; /*設置為0，或者不設置寬度*/
  height: 50px;/*先隨便設置一個高度*/
}

動態高度

上面雖然完成了右下加環繞，但是高度是固定的，如何動態設置呢？這里可以用到 calc 計算，用整個容器高度減去按鈕的高度即可，如下

.text::before{
  content: '';
  float: right;
  width: 0;
  height: calc(100% - 24px);
}

很可惜，好像并沒有什么效果，打開控制臺看看，結果發現 calc(100% - 24px) 計算高度為 0

原因其實很容易想到，就是 高度 100% 失效 的問題，關于這類問題網上的分析有很多，通常的解決方式是給父級指定一個高度，但是這里的高度是動態變化的，而且還有展開狀態，高度更是不可預知，所以設置高度不可取。

除此之外，其實還有另一種方式，那就是利用 flex 布局。大概的方法就是在 flex 布局的子項中，可以通過百分比來計算變化高度，具體可參考 w3.org 中關于 css-flexbox 的描述

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

因此，這里需要給 .text 包裹一層，然后設置 display: flex

<div class="wrap">
  <div class="text">
    <button class="btn">展開</button>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

.wrap{
  display: flex;
}

實踐下來，display: grid 和 display: -webkit-box 同樣有效，原理類似

這樣下來，剛才的計算高度就生效了，改變文本的行數，同樣位于右下角~

除此之外，動態高度也可以采用負的 margin 來實現（性能會比 calc 略好一點）

.text::before{
  content: '';
  float: right;
  width: 0;
  /*height: calc(100% - 24px);*/
  height: 100%;
  margin-bottom: -24px;
}

到這里，右下角環繞的效果就基本完成，省略號也是位于展開按鈕之前的，完整代碼可以查看 codepen 右下角多行展開環繞效果

4.其他瀏覽器的兼容處理

上面的實現是最完美的處理方式。原本以為兼容性沒什么大問題的，畢竟只用到了文本截斷和浮動，-webkit-line-clamp 雖然是 -webkit- 前綴，不過 firefox 也是支持的，打開一看傻了眼，safari 和 firefox 居然全亂了！

這就有點難受了，前面那么多努力都白費了嗎？不可能不管這兩個，不然就只能是 demo 了，無法用于生產環境。

趕緊打開控制臺看看是什么原因。一番查找，結果發現是 display: -webkit-box ！設置該屬性后，原本的文本好像變成了一整塊，浮動元素也無法產生環繞效果，去掉之后浮動就正常了

那么問題來了：沒有 display: -webkit-box 怎么實現多行截斷呢？

其實上面的努力已經實現了右下角環繞的效果，如果在知道行數的情況下設置一個最大高度，是不是也完成了多行截斷呢？為了便于設置高度，可以添加一個行高 line-height，如果需要設置成3行，那高度就設置成 line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

為了方便更好的控制行數，這里可以把常用的行數通過屬性選擇器獨立出來（通常不會太多），如下

[line-clamp="1"] {
  max-height: 1.5em;
}
[line-clamp="2"] {
  max-height: 3em;
}
[line-clamp="3"] {
  max-height: 4.5em;
}
...

<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
 ...
</div>

可以看到基本上正常了，除了沒有省略號，現在加上省略號吧，跟在展開按鈕之前就可以了，可以用偽元素實現

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

這樣，Safari 和 Firefox 的兼容布局基本上就完成了，完整代碼可以查看 codepen 右下角多行展開環繞效果（全兼容）

二、“展開”和“收起”兩種狀態

提到 CSS 狀態切換，大家都能想到 input type="checkbox" 吧。這里我們也需要用到這個特性，首先加一個 input ，然后把之前的 button 換成 label ，并且通過 for 屬性關聯起來

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展開</label>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

這樣，在點擊 label 的時候，實際上是點擊了 input 元素，現在來添加兩種狀態，分別是只顯示 3 行和不做行數限制

.exp:checked+.text{
  -webkit-line-clamp: 999; /*設置一個足夠大的行數就可以了*/
}

兼容版本可以直接設置最大高度 max-height 為一個較大的值，或者直接設置為 none

.exp:checked+.text{
  max-height: none;
}

這里還有一個小問題，“展開”按鈕在點擊后應該變成“收起”，如何修改呢？

有一個技巧，凡是碰到需要動態修改內容的，都可以使用偽類 content 生成技術，具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

<label class="btn" for="exp"></label><!--去除按鈕文字-->

.btn::after{
  content:'展開' /*采用content生成*/
}

添加 :checked 狀態

.exp:checked+.text .btn::after{
  content:'收起'
}

兼容版本由于前面的省略號是模擬出來的，不能自動隱藏，所以需要額外來處理

.exp:checked+.text .btn::before {
    visibility: hidden; /*在展開狀態下隱藏省略號*/
}

基本和本文開頭的效果一致了，完整代碼可以查看 codepen 多行展開收起交互，兼容版本可以查看 codepen 多行展開收起交互（全兼容）

還有一點，如果給 max-height 設置一個合適的值，注意，是合適的值，具體原理可以參考CSS 奇技淫巧：動態高度過渡動畫，還能加上過渡動畫

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就可以了*/
}

三、文本行數的判斷

上面的交互已經基本滿足要求了，但是還是會有問題。比如當文本較少時，此時是沒有發生截斷，也就是沒有省略號的，但是“展開”按鈕卻仍然位于右下角，如何隱藏呢？

通常 js 的解決方式很容易，比較一下元素的 scrollHeight 和 clientHeight 即可，然后添加相對應的類名。下面是偽代碼

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk')
}

那么，CSS 如何實現這類判斷呢？

可以肯定的是，CSS 是沒有這類邏輯判斷，大多數我們都需要從別的角度，采用 “障眼法”來實現。比如在這個場景，當沒有發生截斷的時候，表示文本完全可見了，這時，如果在文本末尾添加一個元素（紅色小方塊），為了不影響原有布局，這里設置了絕對定位

.text::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: red;
}

可以看到，這里的紅色小方塊是完全跟隨省略號的。當省略號出現時，紅色小方塊必定消失，因為已經被擠下去了，這里把父級 overflow: hidden 暫時隱藏就能看到是什么原理了

然后，可以把剛才這個紅色的小方塊設置一個足夠大的尺寸，并且降低透明度，比如 100% * 100%

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}

可以看到，紅色的塊塊把右下角的都覆蓋了，現在把背景改為白色（和父級同底色），父級 overflow: hidden 重新加上

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
}

現在看看點擊展開的效果吧

現在展開以后，發現按鈕不見（被剛才那個偽元素所覆蓋，并且也點擊不了），如果希望點擊以后仍然可見呢？添加一下 :checked 狀態即可，在展開時隱藏覆蓋層

.exp:checked+.text::after{
    visibility: hidden;
}

這樣，就實現了在文字較少的情況下隱藏展開按鈕的功能

最終完整代碼可以查看 codepen 多行展開收起自動隱藏，兼容版本可以查看 codepen 多行展開收起自動隱藏（全兼容）

需要注意的是，兼容版本可以支持到 IE 10+（這就過分了啊，居然還支持 IE），但是由于 IE 不支持 codepen，所以測試 IE 可以自行復制在本地測試。

四、總結和說明

總的來說，重點還是在布局方面，交互其實相對容易，整體實現的成本其實是很低的，也沒有比較生僻的屬性，除了布局方面 -webkit-box 貌似有點 bug （畢竟是-webkit-內核，火狐只是借鑒了過來，難免有些問題），幸運的是可以通過另一種方式實現多行文本截斷效果，兼容性相當不錯，基本上全兼容（IE10+），這里整理一下實現重點

文本環繞效果首先考慮 浮動 float
flex 布局子元素可以通過百分比計算高度
多行文本截斷還可以結合文本環繞效果用 max-height 模擬實現
狀態切換可以借助 checkbox
CSS 改變文本可以采用偽元素生成
多利用 CSS 遮擋“障眼法”

多行文本展開收起效果可以說是業界一個老大難的問題了，有很多 js 解決方案，但是感覺都不是很完美，希望這個全新思路的 CSS 解決方式能給各位帶來不一樣的啟發，感謝閱讀，歡迎點贊、收藏、轉發～

References

[1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh
[2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch
[3] codepen 右下角多行展開環繞效果: https://codepen.io/xboxyan/pen/ExWaBJO
[4] codepen 右下角多行展開環繞效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr
[5] codepen 多行展開收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ
[6] codepen 多行展開收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR
[7] CSS 奇技淫巧：動態高度過渡動畫: https://github.com/chokcoco/iCSS/issues/91
[8] codepen 多行展開收起自動隱藏: https://codepen.io/xboxyan/pen/eYvNvYK
[9] codepen 多行展開收起自動隱藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK

家好我是 Echa。

在最近發布的 Chrome 108 中，帶來了幾個新的 CSS 視口單位：

svh ：小視口單位
lvh ：大視口單位
dvh：動態視口單位

視口(viewport)代表當前可見的計算機圖形區域。在 Web 瀏覽器術語中，通常與瀏覽器窗口相同，但不包括瀏覽器的 UI，菜單欄等 — 即指你正在瀏覽的文檔的那一部分。

一般我們提到的視口有三種：布局視口、視覺視口、理想視口，在我之前寫的下面這篇文章中詳細介紹了視口相關的概念和原理看興趣可以看

關于移動端適配，你必須要知道的

在響應式布局中，我們經常會用到兩個視口相關的單位：

vw(Viewport's width)：1vw 等于視覺視口的 1%
vh(Viewport's height) : 1vh 為視覺視口高度的 1%

另外還有兩個相關的衍生單位：

vmin : vw 和 vh 中的較小值
vmax : 選取 vw 和 vh 中的較大值

如果我們將一個元素的寬度設置為 100vw 高度設置為 100vh，它將完全覆蓋視覺視口：

這些單位有很好的瀏覽器兼容性，也在桌面端布局中得到了很好的應用。

但是，在移動設備上的表現就差強人意了，移動設備的視口大小會受動態工具欄（例如地址欄和標簽欄）存在與否的影響。視口大小可能會更改，但 vw 和 vh 的大小不會。因此，尺寸過大的 100vh 元素可能會從視口中溢出。

當網頁向下滾動時，這些動態工具欄可能又會自動縮回。在這種狀態下，尺寸為 100vh 的元素又可以覆蓋整個視口。

為了解決這個問題，CSS 工作組規定了視口的各種狀態。

Large viewport（大視口）：視口大小假設任何動態工具欄都是收縮狀態。
Small Viewport（小視口）：視口大小假設任何動態工具欄都是擴展狀態。

新的視口也分配了單位：

代表 Large viewport 的單位以 lv 為前綴：lvw、lvh、lvi、lvb、lvmin、lvmax。
代表 Small Viewport 的單位以 sv 為前綴：svw、svh、svi、svb、svmin、svmax。

除非調整視口本身的大小，否則這些視口百分比單位的大小是固定的。

除了 Large viewport 和 Small Viewport ，還有一個 Dynamic viewport（動態視口）

當動態工具欄展開時，動態視口等于小視口的大小。
當動態工具欄被縮回時，動態視口等于大視口的大小。

相應的，它的視口單位以 dv 為前綴：dvw, dvh, dvi, dvb, dvmin, dvmax。

目前，各大瀏覽器均已經對新的視口單位提供了支持：

最后

參考鏈接：

https://web.dev/viewport-units/
https://www.w3.org/TR/css-values-4/#viewport-relative-lengths

在線咨詢

上一篇：HTML5的5種存儲方式詳解
下一篇：如何制作一個完美的全屏視頻H5

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商