Question

我无法弄清楚如何使不同大小的文字自动缩放以适应容器的大小。我原本以为我可以使用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);
}

将可变长度文本缩放到固定容器

0 个答案: