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

时间:2017-01-13 19:25:26

标签: javascript html css

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

没有答案