<html>

<head>
  <meta charset="UTF-8" />
  <style>
    body {
      padding: 20px;
    }

    .single-line-text {
      resize: horizontal;
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #000;
      padding: 2px;
      margin: 20px 0;
    }
  </style>
</head>

<body>
  <div class="single-line-text">
    我是一个名字很长很长很长很长的.pdf
  </div>
  <div>
    是否被截断:
    <span class="single-line-text-result"></span>
  </div>

  <script>
    /**
       * 单行
       */
      const isTruncated = el => {
        return el.scrollWidth > el.clientWidth;
      };

      const element = document.querySelector(".single-line-text");

      const detect = () => {
        const result = isTruncated(element);

        document.querySelector(".single-line-text-result").innerHTML = `${result}`;
      };

      detect();

      const ro = new ResizeObserver(entries => {
        detect();
      });

      ro.observe(document.querySelector(".single-line-text"));
  </script>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.