[ javascript ] 如何判断元素内容被截断。

最新推荐文章于 2024-04-12 11:12:33 发布

ljw1412

最新推荐文章于 2024-04-12 11:12:33 发布

阅读量936

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/ljw1412/article/details/104389161

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

可以用元素的scrollWidth属性和元素的clientWidth属性进行大小比较就可以判断。高也是同理。

Demo代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
  </head>
  <body>
    <div class="view view-1">今天是晴天。</div>
    <div class="debug debug-1"></div>
    <div class="view view-2">今天是晴天。不过今天夜间开始会有大幅度降温。</div>
    <div class="debug debug-2"></div>
    <div class="view view-3">今天是晴天。不过今天夜间开始会有大幅度降温。</div>
    <div class="debug debug-3"></div>
  </body>
  <script>
    window.onload = function() {
      for (let i = 1; i <= 3; i++) {
        debug(i)
      }
    }

    function debug(i) {
      const view = document.querySelector(`.view-${i}`)
      console.dir(view)
      view.nextElementSibling.append(
        JSON.stringify(
          {
            scrollWidth: view.scrollWidth,
            clientWidth: view.clientWidth
          },
          null,
          2
        )
      )
    }
  </script>

  <style>
    .view {
      width: 200px;
      font-size: 16px;
      height: 20px;
      line-height: 20px;
      white-space: nowrap;
      border: 1px solid #ccc;
    }
    .view-1 {
      overflow: hidden;
    }
    .view-2 {
      overflow: hidden;
    }
    .view-3 {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</html>

ljw1412

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[ javascript ] 如何判断元素内容被截断。

可以用元素的scrollWidth属性和元素的clientWidth属性进行大小比较就可以判断。高也是同理。Demo代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=...
复制链接

扫一扫

专栏目录