Javascript Font-Resizer 溢出 Div

Question

我一直在开发一个网站 (scibowltest.github.io)，其中元素的字体大小由 javascript 确定。如果您访问该网站，当在笔记本电脑/台式机上显示时，浏览器以全宽和全高显示时看起来不错。但是，如果您调整窗口大小以减小宽度，字体就会开始溢出应该包含它的 div。

以下代码用于函数 font-sizer，它决定了 font-size 的大小。

function fontSizer(text, box, scale) {
  var textID = "#" + text;
  var boxID = "#" + box;
  var boxHeight = $(boxID).height();
  var boxWidth = $(boxID).width();
  var fontSize = 0;
  if (boxHeight >= boxWidth) {
    fontSize = (boxWidth * scale) + "px";
  } else if (boxHeight < boxWidth) {
    fontSize = (boxHeight * scale) + "px";
  } else {}

  var textHeight = $(textID).height();
  var textWidth = $(textID).width();

  if (textWidth > boxWidth) {
    fontSize = ((fontSize * (scale * boxWidth)) / (textWidth)) + "px";
  } else {}

  $(textID).css("font-size", fontSize);
}

该函数基于包含文本的 div（框）的较小尺寸工作。但是，最后一个 if 语句试图补偿文本宽度大于 div 宽度的情况，尝试缩小字体大小，使文本宽度等于 div 宽度乘以比例尺。

显然，通过查看网站，最后一个 if 语句不起作用。如果有人可以提供帮助，我将不胜感激！

Answer 1

对于纯 CSS 解决方案，您可以使用一些完全适合您的用例的新 length units - 不同的屏幕尺寸。

玩转vw,vh,vmin,vmax，看看什么能给你带来最好的结果。我个人经常使用vmin。

它需要一些摆弄，但会消除对 javascript 的使用。

我在这个例子中也使用了<wbr>（虽然它不应该是必需的）——一个“分词机会”来额外防止溢出。

div {
  width: 40vmin;
  font-size: 8vmin;
  border: 1px solid red;
  resize: both;
  text-align: center;
}

p {
  width: 40vw;
  font-size: 8vw;
  border: 1px solid red;
  resize: both;
  text-align: center;
}

resize the screen to see the fonts scale:

<div>Start/<wbr>Stop</div>

<p>Start/<wbr>Stop</p>