相对于输入长度的字体大小答案

【问题标题】：font-size relative to input length相对于输入长度的字体大小
【发布时间】：2013-06-24 21:01:20
【问题描述】：

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

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

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

【问题讨论】：

我认为仅使用 CSS 是不可能的。我很高兴被证明是错误的，但你可能需要一些 JavaScript。
我已经让它与 js 一起工作，但我真正喜欢的是唯一的 CSS 方式
你可以保持你想要的字体大小并给父元素（div）display: inline-block。
Auto-size dynamic text to fill fixed size container 的可能重复项

标签： html css

【解决方案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" );
    }
});

【讨论】：

【解决方案2】：

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

更新

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

【讨论】：

感谢@yoeriboven，但div 的长度是固定的，这就是我的问题的重点。
对不起，我指的是文字的宽度。