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

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

所以我创建了一个传递容器的函数，然后检查内容是否滚动，如果是，则返回true。虽然它返回true，但我会保留你的使字体变小的功能。看一下片段，看看这对你有帮助。

现在它也检查宽度溢出，如果你只需要高度，调整checkOverflow函数内的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个字母。如果这样减小字体大小，可以说是16px。

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

类似于： -

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

这就是您可以调用伪代码的方法，您可以根据自己的需要对其进行自定义。

调整文字大小以适合div

2 个答案: