我无法弄清楚如何使不同大小的文字自动缩放以适应容器的大小。我原本以为我可以使用vw,vh单位,但是当文本长度不同时,这似乎不起作用。我也尝试过使用FitText,但这似乎也不起作用(如果需要,我可以发布代码)。
我通过jsfiddle制作了一个非常简单的版本。我可以使用什么样的样式来使输入文本比例适合容器的100%,无论长度如何?也许这需要一些JS来计算总行长度,然后从中创建字体大小?这似乎只适用于固定宽度类型。
有什么想法?谢谢!
https://jsfiddle.net/mpecirno/euacdyfz/1/
JS
function change () {
var myNewTitle = document.getElementById('myTextField').value;
if( myNewTitle.length==0 ){
alert('help me make this text fit to the container size!');
return;
}
var title = document.getElementById('title');
title.innerHTML = myNewTitle;
}
HTML
<div id="container">
<h1 id="title">I am text with different lengths</h1>
</div>
<p></p>
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change" onclick="change()"/>
CSS
#container{
width: 300px;
height: 250px;
outline: 1px solid #000;
}
h1 {
font-family: 'Walsheim', arial black, sans-serif;
font-size: calc(6vw);
font-weight: bold;
vertical-align: middle;
color: var(--G1);
}