我怎样才能找出第二个容器的正确字体大小?

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

在这两个容器中,根据用户的输入,它们包含了完全相似的单词。我也在这两个容器中实现了 “断字 “属性。如果第1个容器在到达一行结束时开始断字,我希望第2个容器也做同样的事情。

我如何用Javascript或Jquery来解决这个问题?

enter image description here

解决方案:

一个想法是计算 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>

给TA打赏
共{{data.count}}人
人已打赏
解决方案

为什么Powershell环境的PATH和系统环境的PATH不同?

2022-5-14 3:00:13

解决方案

什么时候使用Selection sort和Merge sort?

2022-5-14 3:00:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索