html - 相对于输入长度的字体大小

Question

我让用户输入一个字符串，然后将该字符串输入到 some <div>.

具有<div>-固定长度- 我希望文本始终适合其中。

有没有办法将font-size属性设置为相对于输入长度（与容器宽度相反，情况并非如此）？希望只有 CSS。谢谢。

Answer 1

我不认为你可以只用 CSS 做到这一点。您可以做的是获取文本的长度，进行一些计算并设置文本的大小。

更新

我发现了这个：Auto-size dynamic text to fill fixed size container

Answer 2

您可以使用 jQuery 来实现这一点，我不认为只有 CSS 是可能的，请查看这个小提琴

注意：这个问题DanielB已经回答了这个问题

HTML

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

CSS

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

Javascript

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});