CSS中的自动缩放字体大小

Question

我有一段文字。当文本长度增加时，我不想溢出多余的页面。总是需要打印一页。

是否有可能使用css自动缩放文本的字体大小，在文本大小大于div大小的div中？

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

Answer 1

Per your comment你是开放使用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 */ 

您可能需要在循环之后调整最终高度一点点。

演示小提琴：http://jsfiddle.net/abhitalks/ab6m7yh1/2/

演示片段：

var threshold = 100; 
 

 
$('p').each(function() { 
 
    var $self = $(this), 
 
\t \t 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

您可以使用引导程序，让您的自适应网站 - 与col-md-xx，引导会自动更改段落的字体大小，检查了这一点： http://getbootstrap.com/css/#responsive-utilities

以另一种方式 - 你可以添加这样一个类似的代码您的样式表：

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

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

Answer 3

您可以使用CSS媒体查询FO R该比如你可以设置每个标签响应

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

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

    h2 { 
     font-size: 2em; 
    } 

    p{ 
     font-size:1,8em 
    } 

} 

Answer 4

您可以使用vw值更改文本的字体大小，像这样：

p { 
    font-size:3vw; 
} 

前段时间我做了一个这个帖子：http://adam-marsden.co.uk/blog/posts/viewport-scaling-divs-and-typography