Html CSS中的自动缩放字体大小

我有一段文字。我不想在文本长度增加时溢出额外的页面。需要始终打印一页

当文本大小大于div的大小时，是否可以在div中使用css自动缩放文本的字体大小

---

文本将由用户编写。我不知道文本的长度。但是我不想让他们使用超过一页的页面。可以设置div的大小，但不能设置文本的长度。最好的方法是什么？

您可以使用bootstrap创建响应性网站-使用

col md xx

，bootstrap将自动更改段落的字体大小，请查看以下内容：

另一种方式-您可以将类似的代码添加到样式表中：

@media (min-width: 320px) and (max-width: 480px) {
    .div-font{font-size:20px}
}

---

请记住设置最大和最小宽度，并更改选择器名称。您可以使用css媒体查询，例如，您可以将每个标记设置为响应

@media only screen and (max-width: 768px) {

   h1 {
      font-size: 2,5em;
   }

   h2 {
      font-size: 2em;
   }

   p{
       font-size:1,8em
   }

}

您可以使用Javascript，因此建议使用Javascript解决方案（实际上使用jQuery）。希望你明白，这是不可能的，只有CSS

您只需定义

高度的阈值

。例如，如果您决定需要在最大高度为

100px

的

p

中容纳文本，则循环并不断减小

字体大小，直到达到阈值高度

大概是这样的：

var threshold = 100, /* define height to restrict */
    p = $('#p'), /* your element depending on whatever selector */
    fs = parseInt(p.css('font-size')); /* get the current font size */

while (p.height() > threshold) { /* while height is more than threshold */
    p.css({'font-size': fs-- }); /* reduce the font-size */
}
p.height(threshold); /* adjust the final height to clean up */

在循环之后，可能需要稍微调整最终高度

演示小提琴：

演示片段：


var阈值=100；
$（'p'）。每个（函数（）{
var$self=$（此），
fs=parseInt（$self.css（'font-size'））；
而（$self.height（）>阈值）{
$self.css（{'font-size'：fs--}）；
}
$self.height（基本要求）；
});
p{font size:2em；width:320px；height:auto；border:1px solid#ccc；}

知识是一种美德，是一种美德，是一种美德，是一种美德

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
 
您可以使用
vw
值更改文本的字体大小，如下所示：

p {
    font-size:3vw;
}

不久前我发表了一篇关于这一点的帖子：
如果我们减小字体大小可以吗？使用javascript可以：）哦，是的。。我怀疑是纯CSS。如果是Javascript，我可以给你一些代码片段：）@serhat:你愿意使用Javascript吗？@SerhatMERCAN:那里。添加了一个答案。很好的提示！谢谢你的分享和文章。