CSS中的自动缩放字体大小

Question

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

在div中，当文本大小大于div大小时，是否可能使用CSS自动缩放文本字体大小？

文本将由用户编写。我对文本长度没有任何想法。但我不希望让他们使用多于一页的页面。可以设置div的大小，但无法设置文本的长度。什么是最佳方法？

- Serhat MERCAN

---

我们可以缩小字体大小吗？ - Benil Mathew

用JavaScript可以实现 :) - nowhere

哦，是啊...纯 CSS？我怀疑。如果是 JavaScript，也许我可以给你一些代码片段 :) - Benil Mathew

@serhat：你是否愿意使用 JavaScript？ - Abhitalks

@SerhatMERCAN：好的，已添加答案。 - Abhitalks

混合使用vw和vh设置字体大小 - 0x860111

Answer 1

您可以使用vw值更改文本的字体大小，如下所示：

p {
    font-size:3vw;
}

我之前写过一篇文章，与此相关： http://adam-marsden.co.uk/blog/posts/viewport-scaling-divs-and-typography。这篇文章涉及到IT技术方面的内容，主要是关于视口缩放、div元素和排版方面的问题。

- Adam Marsden

---

不错的技巧！感谢您的分享和文章。 - Serhat MERCAN

这仅与视口大小有关，而不是父元素大小。 - Normal

Answer 2

根据您的评论，您可以使用JavaScript，因此提出了一个JavaScript解决方案（实际上使用jQuery）。希望您理解这只用CSS是不可能的。

您需要做的就是为height定义您的阈值。例如，如果您决定需要将文本容纳在最大高度为100px的p中，则循环并不断减小font-size，直到达到阈值高度。

类似于以下内容：

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 */

在循环结束后，您可能需要稍微调整最终高度。

演示fiddle: http://jsfiddle.net/abhitalks/ab6m7yh1/2/

演示代码片段：

var threshold = 100;

$('p').each(function() {
    var $self = $(this), 
  fs = parseInt($self.css('font-size'));
    
    while($self.height() > threshold) {
        $self.css({'font-size': fs-- });
    }
    $self.height(threshold);
});

p { font-size: 2em; width: 320px; height: auto; border: 1px solid #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

- Abhitalks

Answer 3

你可以使用CSS媒体查询来实现这个功能，例如你可以将每个标签设置为响应式的

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

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

   h2 {
      font-size: 2em;
   }

   p{
       font-size:1,8em
   }

}

- Piotr Sikora

Answer 4

你可以使用Bootstrap制作响应式网站-通过col-md-xx，Bootstrap会自动更改你段落的字体大小，看看这个链接: http://getbootstrap.com/css/#responsive-utilities 另外一种方法是-你可以将类似于这样的代码添加到样式表中:

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

记得设置最大和最小宽度，并更改选择器名称

- Arya Aghaei