Css 根据高度（垂直长度）调整尺寸_Css

Css 根据高度（垂直长度）调整尺寸

css

Css 根据高度（垂直长度）调整尺寸,css,Css,我正在做一个div，它需要显示文本字段的全部内容，并动态调整文本大小，这样它就不会溢出要了解这个问题，请看这里您可以尝试使用“创世纪1:1”的格式gen1:1在左下方文本框中输入诗句我的问题是，当我试图显示长诗时，它们会被截断。我需要根据当前文本的长度更改大小。是否有一些css可以根据文本字段大小应用？如评论中所述，使用纯css无法根据文本包含元素的高度缩放文本。但这里有一个小jQuery脚本，我在过去需要实现您想要的东西时使用过。当用户调整浏览器窗口的大小时，它还会调整文本大小 HTML

我正在做一个div，它需要显示文本字段的全部内容，并动态调整文本大小，这样它就不会溢出

要了解这个问题，请看这里

您可以尝试使用“创世纪1:1”的格式

gen1:1

在左下方文本框中输入诗句

我的问题是，当我试图显示长诗时，它们会被截断。我需要根据当前文本的长度更改大小。是否有一些css可以根据文本字段大小应用？

如评论中所述，使用纯css无法根据文本包含元素的高度缩放文本。但这里有一个小jQuery脚本，我在过去需要实现您想要的东西时使用过。当用户调整浏览器窗口的大小时，它还会调整文本大小

HTML:

JS:

$（窗口）.bind（'resize'，函数（e）{
scalekote（）；
});
函数scalekote（）{
var quote=$（'.quote'）；
var winH=$（window.height（）；
//重置字体大小。
css（'font-size'，''）；
//如果quote大于viewport，请减小字体大小，直到其适合。
而（winH<（quote.height（））{
var fontSize=parseInt（quote.css（'font-size'），10）；
css（'font-size'，fontSize-1+'px'）；
}
}
scalekote（）；

演示：

你可以试试这样的东西。它会将输入字段设置为10个字符，如果它更大，则会增加其大小。

您想拥有jQuery代码吗？问题很多，但对于初学者来说，您在想要拥有类的元素上使用ID（每个元素的ID应该总是唯一的，永远不要重复）。另外，你应该使用CSS框模型来为你的利益服务，而不是对抗它。谢谢。。事实上，我刚刚开始，我真的不知道我在用什么。就是我在网上找到的。对于长方体模型。你指的是这个吗？@shahbaz我需要做什么改变？我需要重新开始吗？我希望没有，但如果没有其他方式，我愿意考虑任何解决方案，将工作，你不能做到这一点纯粹是CSS。您将需要使用javascript，jquery库将使它变得简单，尽管不是必需的？是因为我提供了一个JS解决方案，还是我的答案在某些方面有缺陷？一个评论将允许我解决我的答案的任何问题。这是伟大的。这正是我需要的。不幸的是，我无法将其应用于我的项目。你能检查一下有什么问题吗？这是我的测试页面。我忘了提。尝试在左下角的文本框中输入“gen 2:19”以显示足够的文本内容。@Jonathn Nicol，当div也发生变化时，是否可以应用签入大小？它可以在窗口更改时完全调整大小，但我使用“下一步-上一步”按钮实现文本内容的更改。用新文本填充#versePlace后，调用scalekote（）函数。e、 g.在document.getElementById（“versePlace”）.innerHTML=xmlhttp.responseText之后；OP希望更改大白文本（诗句）的大小，而不是表单输入。

<p class="quote">
Really long text goes here...
</p>

.quote {
    // The largest size to display text at.
    font-size: 36px;
}

$(window).bind('resize',function(e){
    scaleQuote();
});

function scaleQuote(){    
    var quote = $('.quote');
    var winH = $(window).height();

    // Reset font size.
    quote.css('font-size', '');

    // If quote is larger than viewport, reduce font-size until it fits.
    while (winH < (quote.height())){
        var fontSize = parseInt(quote.css('font-size'), 10);
        quote.css('font-size', fontSize-1+'px');
    }
}

scaleQuote();

<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>