Question

我有一种无法控制的情况（与库相关），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>

Answer 1

您可以使用scrollWidth和scrollHeight代替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>

Answer 2

仅获取文本宽度

如果您只想检测字符串是否超出其父元素，则最好的方法是使用jQuery element.width()方法将字符串放在span中，因为div元素默认自动获得100%的宽度。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id='tooBig' style='white-space: nowrap;'>This string is too long ...</span>
<script>
  var x = $('#tooBig').width();
  console.log("Text width: "+x);
</script>

现在，您可以将其与容器的width进行比较，并检查字符串是否比其父字符串宽。

如果要避免换行，请为父white-space: nowrap;添加span CSS样式，或使用 字符编码而不是空格。

使用CSS自动包装字符串

我想您的目的不仅是检测文本是否从div中流出，而且还要包装字符串，因此有一个非常优雅的CSS方法。该技术使用flexbox，test-overflow: ellipsis和overflow: hidden以及字符串溢出的行为。您无需使用任何类型的JavaScript，文本就会自动换行并获得...结尾。

/* Text is a header now,
  so need to truncate there for it to work */
.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Text is directly within flex child,
   so doing the wrapping here */
.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-parent">
  <div class="flex-child">
    <h2>Resize the window to see how this very very long text gets resized...</h2>
  </div>
</div>

参考

CSS Flexbox Resize
jQuery text width

如何检测文本是否超出边界框

2 个答案: