我有一段文字。当文字长度增加时,我不想让它溢出额外的页面。需要始终打印一页。
在div中,当文本大小大于div大小时,是否可能使用CSS自动缩放文本字体大小?
文本将由用户编写。我对文本长度没有任何想法。但我不希望让他们使用多于一页的页面。可以设置div的大小,但无法设置文本的长度。什么是最佳方法?
我有一段文字。当文字长度增加时,我不想让它溢出额外的页面。需要始终打印一页。
在div中,当文本大小大于div大小时,是否可能使用CSS自动缩放文本字体大小?
文本将由用户编写。我对文本长度没有任何想法。但我不希望让他们使用多于一页的页面。可以设置div的大小,但无法设置文本的长度。什么是最佳方法?
vw
值更改文本的字体大小,如下所示:p {
font-size:3vw;
}
根据您的评论,您可以使用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>
你可以使用CSS媒体查询来实现这个功能,例如你可以将每个标签设置为响应式的
@media only screen and (max-width: 768px) {
h1 {
font-size: 2,5em;
}
h2 {
font-size: 2em;
}
p{
font-size:1,8em
}
}
col-md-xx
,Bootstrap会自动更改你段落的字体大小,看看这个链接:
http://getbootstrap.com/css/#responsive-utilities
另外一种方法是-你可以将类似于这样的代码添加到样式表中:@media (min-width: 320px) and (max-width: 480px) {
.div-font{font-size:20px}
}
记得设置最大和最小宽度,并更改选择器名称