Question

我一直在网站上工作（scibowltest.github.io），其中元素的字体大小由javascript决定。如果你进入网站，当浏览器的全宽和高度显示在笔记本电脑/台式机上时，它看起来很好。但是，如果您调整窗口大小以使宽度变小，则字体开始溢出应该包含它的div。

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

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（box）的较小维度工作。但是，最后一个if语句尝试补偿文本宽度大于div宽度的那些情况，以尝试缩小fontsize，使文本的宽度等于div的宽度乘以比例。

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

Answer 1

对于纯CSS解决方案，您可以使用一些专为您的用例而设计的新length units - 不同的屏幕尺寸。

使用vw，vh，vmin，vmax进行游戏，看看能给您带来最佳效果的内容。我个人经常使用vmin。

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

此外，我在此示例中使用了<wbr>（尽管不应该这样做） - 一个＆＃34;单词中断机会＆＃34;另外防止溢出。

＆＃13;

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;
}

＆＃13;

resize the screen to see the fonts scale:

<div>Start/<wbr>Stop</div>

<p>Start/<wbr>Stop</p>

＆＃13;

Javascript Font-Resizer溢出Div

1 个答案: