时间戳

首页 > 解决方案 > 我如何才能找到第二个容器的正确字体大小？

javascript - 我如何才能找到第二个容器的正确字体大小？

问题描述

我正在做这个项目。基本上，我有 2 个容器，它们都有 2 个不同的宽度和高度。我的目标是找到第二个容器相对于第一个容器的正确字体大小。

在这两个容器中，它们包含完全相似的单词，具体取决于用户输入。我还在他们两个中实现了“word-break”属性。如果第一个容器在到达行尾时开始破坏单词，我希望第二个容器做同样的事情。

我将如何在 Javascript 或 Jquery 中解决这个问题？

在此处输入图像描述

标签： javascriptjquerycss

解决方案

一种想法是font-size根据宽度的无线电进行计算：

x = originalFontSize * (newWidth / originalWidth)
  = 51 * (510 / 612)
  = 42.5

这是一个演示：

let firstBox = document.getElementById('one');
let firstSize = parseFloat(window.getComputedStyle(firstBox, null).getPropertyValue('font-size'));
let els = document.getElementsByClassName('resize');

Array.from(els).forEach((el) => {
  let thisSize = firstSize * (el.clientWidth / firstBox.clientWidth);
  el.style.fontSize = thisSize + "px";
});
div {
  word-break: break-all;
  margin: 0 0 0.5em;
  background-color: lightgray;
}

#one {
  width: 320px;
  font-size: 18px
}
#two {
  width: 280px;
}
#three {
  width: 210px;
}
<div id="one">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>
<div id="two" class="resize">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>
<div id="three" class="resize">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>

推荐阅读