如何自动更改div内的文字大小？
我有一个div的背景图片。 我想写一些文字，但是这个文字应该通过div来改变字体大小。
我这样理解你的问题，你想将一些文本合并到固定维度的给定div中，如果div太小而不能显示所有的文本，字体大小应该缩小，直到文本适合div。 如果这是重点，这是我的解决scheme。
下面是一个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" ); } });
FlowType.js将做到这一点：调整字体的大小，以匹配边界元素，无论是一个div或另一种元素types。
一个实现FlowType的例子：
-
设置你的风格
body { font-size: 18px; line-height: 26px; } -
从GitHub下载FlowType并在head元素中包含对它的引用
flowtype.jQuery.js -
调用FlowType
$('body').flowtype(); -
（可选）更新默认设置
$('body').flowtype({ minimum : 500, maximum : 1200, minFont : 12, maxFont : 40, fontRatio : 30, lineRatio : 1.45 });
查看他们的主页进行互动演示
我不完全确定我理解你的问题，但我想你问的是如何适应预定义大小的特定容器中的文本。 我会尽力回答这个问题。
客户端
当你想在客户端上这样做，你将不得不运行Javascript。 这个想法是：
-
生成一个不可见的
div，并将其样式设置为：position: absolute; top: 0; left: 0; width: auto; height: auto; display: block; visibility: hidden; font-family: /* as per your original DIV */ font-size: /* as per your original DIV */ white-space: /* as per your original DIV */ -
复制您的文本到它
-
检查DIV的宽度是否超出了原始DIV的大小。
-
调整
font-size值不是简单地增加/减less，而是通过计算不可见和原始DIV之间的宽度差异。 这会偏离正确的尺寸更快。 -
请转到步骤3 。
服务器端
没有可靠的方式来设置服务器上的字体大小，所以它将适合您的客户端渲染的容器。 不幸的是，您只能预测经验数据的大小。
这个问题已经回答了很久，但我想补充一些注释。
因为，一个额外的jQuery插件已被添加到Universe：FlowType.js
我尝试了解给定的解决scheme和插件（包括FlowType.JS），最后我写了自己的。 我只是想把它作为“灵感”来包含在这里。 我使用了一种不同的方法：我计算出文本的大小比父大的比例。 我不知道这是否合理，但对我来说，它的作用很好。
/* shrinkText jQuery Plugin */ (function( $ ){ $.fn.shrinkText = function() { var $_me = this; var $_parent = $_me.parent(); var int_my_width = $_me.width(); var int_parent_width = $_parent.width(); if ( int_my_width > int_parent_width ){ rl_ratio = int_parent_width / int_my_width; var int_my_fontSize = $_me.css("font-size").replace(/[^-\d\.]/g, ''); int_my_fontSize = Math.floor(int_my_fontSize * rl_ratio); $_me.css("font-size", int_my_fontSize + "px"); } }; })( jQuery );
它假设块级元素内的内联元素，它通过重新计算字体大小来缩小内联元素。
HTML：
<h1 style="white-space:nowrap;"> <a href="#" >Macrobenthos of the North Sea - Miscellaneous worms</a> </h1>
JavaScript的：
if( jQuery().shrinkText ){ $("#title a").shrinkText(); }
您必须预加载图像以获取图像的宽度和高度。
只要你有尺寸，你可以“尝试”不同的字体：
$("<img/>").appendTo(document.body).attr('src','myBackground.png').load(function(){ var width = $(this).width(), height = $(this).height(), $div = $("#myDivId"), font = 30; do{ font--; $div.css('font-size',font); }while($div.width()>width || $div.height()>height || font == 0); $div.width(width); $div.height(height); });
下面是一个用JQuery和HTML5 Data annotations来定义块大小的全局函数：
不要问我为什么我需要表格:-)，宽度的function最好的工作与表…在JQuery 1.7 ..没有Div的宽度
用法：
<table> <tr> <td class="caa" data-text-max-width="500" data-text-max-height="80"> The Text is Here </td> </tr> </table>
function添加：
$(function () { var textConsts = { MIN_SIZE_OF_A_TEXT: 9 }; $('*[data-text-max-width]').each(function () { var textMaxWidth = $(this).data("text-max-width"); var textMaxHeight = $(this).data("text-max-height"); var minSizeOfaText = $(this).data("text-min-size"); $(this).css('font-size', '9em'); if (minSizeOfaText == null || !($(this).hasData("text-min-size"))) minSizeOfaText = textConsts.MIN_SIZE_OF_A_TEXT; if (textMaxWidth == null || !($(this).hasData("text-max-width"))) textMaxWidth = $(this).parent().width(); if (textMaxHeight == null || !($(this).hasData("text-max-height"))) textMaxHeight = $(this).parent().height(); var curentWidth = $(this).width(); var curentFontSize = 0; var numberOfRounds = 0; var currentHeigth = $(this).height(); curentFontSize = parseInt($(this).css('font-size')); var lineHeigth = parseInt($(this).css('line-height')); if (currentHeigth > (curentFontSize * lineHeigth)) { curentWidth += curentFontSize * lineHeigth; } while (curentWidth > textMaxWidth || currentHeigth > textMaxHeight) { curentFontSize = parseInt($(this).css('font-size')); curentFontSize -= 1; $(this).css('font-size', curentFontSize + "px"); curentWidth = $(this).width(); currentHeigth = $(this).height(); if (currentHeigth > (curentFontSize * 1.5)) curentWidth += curentFontSize * 1.5; numberOfRounds += 1; if (numberOfRounds > 1000) break; if (curentFontSize <= minSizeOfaText) break; } $(this).css('height', textMaxHeight + "px"); $(this).css('width', textMaxWidth + "px"); }); });
如果在div内部有复杂的HTML，并且要保持不同元素之间的比例，则可以扩展DanielB解决scheme：
$(function() { $(window).on('resize', function() { $('#fitin').css('font-size', '1em'); var count = 0; while( count< 30 && $('#fitin').height() > $('#fitin div').height() ) { $('#fitin *').each(function( index ) { $(this).css('font-size',(parseInt($(this).css('font-size')) + 1) + "px"); }); count++; } count = 0; while( count< 30 && $('#fitin div').height() > $('#fitin').height()-20 ) { $('#fitin *').each(function( index ) { $(this).css('font-size',(parseInt($(this).css('font-size')) - 1) + "px"); }) count++; } }); $(window).trigger('resize'); });
我做了更好的@DanielB代码版本，也许会节省一些时间:)
（只需将类RESIZABLE添加到您想要更改的div）
$(document).ready(function() { $(window).resize(function() { $('.RESIZABLE').each(function(i, obj) { $(this).css('font-size', '8em'); while ($(this).width() > $(this).parent().width()) { $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px"); } }); }); });
看看这个例子http://codepen.io/LukeXF/pen/yOQWNb ，你可以使用一个简单的函数在页面加载和页面resize，使魔术发生。
function resize() { $('.resize').each(function(i, obj) { $(this).css('font-size', '8em'); while ($(this).width() > $(this).parent().width()) { $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px"); } }); }
