整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

因为写不出拖拽移动效果，我恶补了一下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

​

行文本展开收起是一个很常见的交互， 如下图演示



实现这一类布局和交互难点主要有以下几点


  1. 位于多行文本右下角的“展开收起”按钮
  2. “展开”和“收起”两种状态的切换
  3. 当文本不超过指定行数时，不显示“展开收起”按钮


说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp 就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~



一、位于右下角的“展开收起”按钮


很多设计同学都喜欢这样的设计，把按钮放在右下角，和文本混合在一起，而不是单独一行，视觉上可能更加舒适美观。先看看多行文本截断吧，这个比较简单


  1. 多行文本截断


假设有这样一个 html 结构


<div class="text">
  浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>


多行文本超出省略大家应该很熟悉这个了吧，主要用到用到 line-clamp ，关键样式如下


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



  1. 右下角环绕效果


提到文本环绕效果，一般能想到 浮动 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;/*先随便设置一个高度*/
}



  1. 动态高度


上面虽然完成了右下加环绕，但是高度是固定的，如何动态设置呢？这里可以用到 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+），这里整理一下实现重点


  1. 文本环绕效果首先考虑 浮动 float
  2. flex 布局子元素可以通过百分比计算高度
  3. 多行文本截断还可以结合文本环绕效果用 max-height 模拟实现
  4. 状态切换可以借助 checkbox
  5. CSS 改变文本可以采用伪元素生成
  6. 多利用 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小时内与您取得联系。

推荐阅读
友情链接 川汇区 双江拉祜族佤族布朗族傣族自治县 莱西 东营 桑植县 阜南县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服