调整文本大小以适应 div

Question

我有几个 div，其中包含各种文本（标题、段落……），字体大小为 em。 我想检测这些 div 中是否存在溢出，然后在减小字体大小的同时进行迭代，直到所有内容都适合 div。

现在我的scrollHeight 总是等于clientHeight，我没有检测到溢出。

我的 div 正在使用 flexbox，并且不能具有固定的像素大小！

var fitDivs = document.querySelectorAll("div[data-slide-fit]");
fitDivs.forEach(function(fitDiv) {
  if (fitDiv.scrollHeight > innerHeight(fitDiv)) {
    var style = window.getComputedStyle(fitDiv, null);
    var innerHeight = el.clientHeight
    for (iFontSize = 20; iFontSize > 10; iFontSize--) {
      fitDiv.style['font-size'] = iFontSize + 'px';
      if (fitDiv.scrollHeight < innerHeight) {
        break;
      }
    }
  }
});

.container {
  display: flex;
  height: 300px;
  width: 400px;
  margin: 20px;
  background-color: aqua;
}

.container>div {
  width: 50%;
  padding: 10px;
}

h2 {
  font-size: 2.5em;
}

p {
  font-size: 1.3em;
}

<div class="container">
  <div class="column" data-slide-fit="">
    <h2>Column 1</h2>
    <p>This is a very very very very very very very very very very very very very very very very very very very very very very very very very long text</p>
  </div>
  <div class="column" data-slide-fit="">
    <h2>Column 2</h2>
    <p>This is a an ven very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</p>
  </div>
</div>

Answer 1

在谷歌上搜索了一下，我找到了一个可能的解决方案来检查容器 div 的内容是否超出其大小。

所以我做了一个函数，你传递容器然后检查内容是否滚动，如果是，它返回true。当它返回真时，我保留你的 缩小字体的功能。看看 sn-p 看看这是否对你有帮助。

现在它也在检查宽度溢出，如果你只想要高度，调整 checkOverflowfunction 中的 if。

function checkOverflow(element){
  if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    return true;
  } else {
      return false;
  }
};


var fitDivs = document.querySelectorAll("div[data-slide-fit]");
fitDivs.forEach(function(fitDiv) {
  if (checkOverflow(fitDiv)){
    for	(iFontSize=20; iFontSize > 10;iFontSize-- ){    
      fitDiv.style['font-size'] = iFontSize + 'px';
      if (checkOverflow(fitDiv) == false){
        break;
      }
    }
  }							       
});
  
  

.container{
		display: flex;
		height: 300px;
		width:400px;
		margin:20px;
		background-color:aqua;
	}
.container > div {
	width: 50%;
	padding: 10px;
}
h2{
font-size: 2.5em;
}

p{
font-size:1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

		<div class="column" data-slide-fit="">
			<h2>Column 1</h2>
			<p>This is a very very very very very very very  very very very very very very very very very very very very very very very very very very long text</p>
		
		</div>
		<div class="column" data-slide-fit="">
			<h2>Column 2</h2>
			<p>This is a an even very very very very very very very very very very  very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</p>
		
		</div>
	


</div>

Answer 2

我有一个可行的想法。您可以测试并查看 div 在达到溢出状态之前可以包含的字母数。例如，假设您发现它是 100 个字母。然后使用 if 语句检查字符串的长度是否大于 100 个字母。如果是这样，请减小字体大小到 16 像素。

然后您可以检查 16px 大小的字母数量是否会导致 div 达到溢出状态并添加一个 else if 语句来检查字符串的长度是否超过此数量，字体大小会再次发生变化。

类似：-

if (string.length > 100) {
    iFontsize = 16px;
} else if (string.length > 500) {
    iFontSize = 14px;
}

这就是你可以称之为伪代码的东西，你可以根据需要对其进行自定义。