我可以使用200vh等将字体设置为相对于视口的大小（如果我只是将其放在正文中）。但是如何使它的大小适合完全适合容器的大小呢？也就是说，我希望在文本的每一侧都有一定的边距，例如8％的宽度，并让文本填充其余的84％。如何使用HTML / JS / CSS做到这一点？
body {
font-size: 70vh;
display: flex;
text-align: center;
justify-content: center;
}hello最佳答案
这种方法不是完美的像素，但会产生近似结果。
通过将文本包装起来（例如用<span>包裹），您可以获得初始文本宽度和字体大小，这将用于使用容器的宽度来计算最终字体大小。
window.addEventListener('resize', calcFontSize);
var textEl = document.querySelector('span'),
textElParent = textEl.parentNode,
textFontSize = parseFloat(window.getComputedStyle(textEl, null).getPropertyValue('font-size')),
textWidth = textEl.clientWidth,
spaceToFill;
function calcFontSize() {
spaceToFill = textElParent.clientWidth;
textEl.style.fontSize = (spaceToFill * textFontSize)/textWidth + "px";
}
calcFontSize();html {
background-color: #fff;
}
body {
background-color: #f3f3f3;
display: flex;
text-align: center;
justify-content: center;
margin: 0 8%;
}<body>
<span>hello</span>
</body>