如何自动更改div内的文本大小？

Question

我有一个背景图像div.我想写一些文本,但是这个文本应该改变字体大小div.

Answer 1

我这样理解你的问题,你想将一些文本放入具有固定维度的给定div中,如果div太小而不能显示所有文本,则应缩小字体大小,直到文本适合div.如果这就是重点,这是我的解决方案.

这是一个jQuery实现的例子:http://jsfiddle.net/MYSVL/2/

这是一个div

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

具有固定的尺寸

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

这个JavaScript可以完成这项工作.

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

Answer 2

FlowType.js就是这样做的:调整字体大小以匹配边界元素,无论是div还是其他元素类型.

实现FlowType的一个示例:

1. 树立你的风格

   body {
   font-size: 18px;
   line-height: 26px;
   }
   

2. 从GitHub下载FlowType并在head元素中包含对它的引用

   flowtype.jQuery.js
   

3. 调用FlowType

   $('body').flowtype();
   

4. (可选)更新默认设置

   $('body').flowtype({
   minimum   : 500,
   maximum   : 1200,
   minFont   : 12,
   maxFont   : 40,
   fontRatio : 30,
   lineRatio : 1.45
   });
   

查看他们的主页以获得交互式演示