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

Question

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

<div>有一个 - 固定长度 - 我希望文本始终适合它。

有没有办法设置font-size属性相对于输入长度(相对于容器宽度，情况并非如此)？希望仅使用 CSS。谢谢。

Answer 1

您可以使用 jQuery 实现此目的，我认为仅 CSS 是不可能的，请查看 fiddle

注意:这已由 DanielB 回答为此 question

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" );
    }
});