Question

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

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

有没有办法将font-size属性设置为相对于输入长度（而不是容器宽度，而不是这种情况）？希望只有CSS。感谢。

Answer 1

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

<强>更新

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

Answer 2

你可以使用jQuery实现这一点，我不认为CSS是唯一可能的，请查看此fiddle

注意：[{3}}

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

相对于输入长度的font-size

2 个答案: