Question

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

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

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

Answer 1

Per your comment您可以使用Javascript，因此提出了一个Javascript解决方案（实际上使用jQuery ）。希望你明白只有CSS才能做到这一点。

您只需为height定义阈值即可。例如，如果您决定需要在p中使用100px的最大高度来容纳文本，那么您循环并继续缩小font-size，直到阈值< / em>达到高度。

这样的事情：

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

您可以使用<?php $sql="SELECT distinct bankName, state, district FROM table where bankName='$bank' group by state and district"; $result = mysqli_query($con,$sql); $rowcount=mysqli_num_rows($result); ?> <section class="left"> <h1>District-wise list of <?php echo $bank; ?> Branches in <?php echo $state; ?></h1> <p>Branches of <?php echo $bank; ?> are available at <?php echo $rowcount; ?> <?php echo $districts; ?> districts of <?php echo $state; ?> in India</p> <?php echo "<ul class=\"states\">\n"; if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<li><a href='/bank/".str_replace($remove, "-", $row['bankName'])."/state/".str_replace($remove, "-", $row['state'])."/district/".str_replace($remove, "-", $row['district'])."'>" . $row["district"]. "</a></li>\n"; } echo "</ul>"; } else { echo "<p>No results Found</p>"; } mysqli_close($con); ?> </section>值更改文本的字体大小，如下所示：

vw

前段时间我发了一篇关于此事的帖子：http://adam-marsden.co.uk/blog/posts/viewport-scaling-divs-and-typography

Answer 3

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

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

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

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

Answer 4

You can use css media queries for this for example you can set each tag to be responsive

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

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

   h2 {
      font-size: 2em;
   }

   p{
       font-size:1,8em
   }

}

CSS中的自动缩放字体大小

4 个答案: