CSS自动缩放字体大小

Question

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

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

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

Answer 1

Per your comment --您可以使用Javascript，因此提出了Javascript解决方案(实际上使用jQuery)。希望你明白，这是不可能的，只有CSS。

您所需要的只是定义height的阈值。例如，如果您决定需要在一个最大高度为p的100px中容纳您的文本，那么可以循环并一直减少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 */

您可能需要在循环之后稍微调整最后的高度。

演示小提琴： 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>

​

Answer 2

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

p {
    font-size:3vw;
}

不久前我写了一篇关于这个的文章：http://adam-marsden.co.uk/blog/posts/viewport-scaling-divs-and-typography

Answer 3

您可以使用引导程序使您的响应网站-使用col-md-xx，引导将自动更改您段落的字体大小，请查看：http://getbootstrap.com/css/#responsive-utilities

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

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

请记住设置最大和最小宽度并更改选择器名称。