我的情况超出了我的直接控制范围(与库相关),HTML div中的文本超出了其封闭的边界框。我在下面给出一个简单的示例,尽管就我而言,它是div<foreignObject><g>内的<svg> ...

在下面的示例中,有没有一种方法可以以编程方式检测文本是否超出其边界框?获取封闭的<div>及其关联的父级的大小似乎返回相同的宽度,而不是文本的宽度。



<!doctype html>
<html lang="">

<head>
  <style>
    .container {
      background: yellow;
      border: 2px solid black;
      width: 200px;
      height: 100px;
    }

    .tooBig {
      white-space: nowrap;
    }
  </style>

  <script>
    function figureOutSizes() {
      let container = document.getElementById("my-container");
      let contBound = container.getBoundingClientRect();
      console.log(`Container size: ${boundToString(contBound)}` );

      let tooBig = document.getElementById("tooBig");
      let bigBound = tooBig.getBoundingClientRect();
      console.log(`text size: ${boundToString(bigBound)}` );
    }

    function boundToString(rect) {
      return `rect(w=${rect.width}, h=${rect.height})`;
    }
  </script>

  <meta charset="utf-8">
  <title>Out of bounds</title>
</head>

<body>

  <div id="my-container" class="container" >
      <div id="tooBig" class="tooBig">This line is too big for its containing div! What am I going to do?</div>
  </div>

  <div>
    <button onclick="figureOutSizes();">Get sizes</button>
  </div>
</body>

</html>

最佳答案

您可以使用scrollWidthscrollHeight代替getBoundingClientRect



function figureOutSizes() {
  let container = document.getElementById("my-container");
  let contBound = container.getBoundingClientRect();
  console.log(`Container size: ${boundToString(contBound)}`);

  let tooBig = document.getElementById("tooBig");
  let bigBound = {
    width: tooBig.scrollWidth,
    height: tooBig.scrollHeight
  };

  console.log(`text size: ${boundToString(bigBound)}`);
}

function boundToString(rect) {
  return `rect(w=${rect.width}, h=${rect.height})`;
}

.container {
  background: yellow;
  border: 2px solid black;
  width: 200px;
  height: 100px;
}

.tooBig {
  white-space: nowrap;
}

<div id="my-container" class="container">
  <div id="tooBig" class="tooBig">This line is too big for its containing div! What am I going to do?</div>
</div>

<div>
  <button onclick="figureOutSizes();">Get sizes</button>
</div>

关于javascript - 如何检测文本是否超出边界框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51386395/

10-16 18:48
查看更多