我有一张div的背景图片。我想写一些文字，但是这段文字应该通过div改变字体大小。
答案 0 :(得分：52)
我以这种方式理解你的问题，你想将一些文本放入具有固定维度的给定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" );
}
});
答案 1 :(得分：6)
FlowType.js就是这样做的：调整字体大小以匹配边界元素，无论是div还是其他元素类型。
实现FlowType的一个例子：
设置你的风格
body {
font-size: 18px;
line-height: 26px;
}
Download FlowType from GitHub并在头元素中包含对它的引用
flowtype.jQuery.js
调用FlowType
$('body').flowtype();
（可选）更新默认设置
$('body').flowtype({
minimum : 500,
maximum : 1200,
minFont : 12,
maxFont : 40,
fontRatio : 30,
lineRatio : 1.45
});
查看their homepage以获取交互式演示
答案 2 :(得分：1)
我不完全确定我理解你的问题，但我认为你所问的是如何在预定义大小的特定容器中拟合文本。我会尝试回答这个问题。
如果您想在客户端上按需执行此操作，则必须运行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值，而是通过计算不可见和原始DIV之间的宽度差来调整{{1}}值。这将更快地偏离正确的尺寸。
转到步骤 3 。
没有可靠的方法在服务器上设置字体大小，因此它适合您的客户端渲染容器。遗憾的是，您只能根据预先测试的经验数据估算大小。
答案 3 :(得分：1)
问题已经回答了很长时间，但我想补充一些注意事项。
因为，宇宙中添加了一个额外的jQuery插件：FlowType.js
https://github.com/simplefocus/FlowType.JS
我尝试了给定的解决方案和插件（包括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();
}
答案 4 :(得分：0)
您必须预先加载图像以获得图像的宽度和高度。
只要你有尺寸，就可以“尝试”不同的字体：
$("<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);
});
答案 5 :(得分：0)
这是一个使用JQuery和HTML5数据注释的全局函数来定义块大小看看：
不要问我为什么需要这个表:-)，宽度函数最适合表格...在Jquery 1.7上...没有得到Divs的宽度
用法：
<table>
<tr>
<td class="caa" data-text-max-width="500" data-text-max-height="80">
The Text is Here
</td>
</tr>
</table>
要添加的功能：
$(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");
});
});
答案 6 :(得分：0)
如果你在div中有一个复杂的HTML并希望保持不同元素之间的比例，我会扩展DanielB解决方案：
String pageSource = driver.getPageSource();
Document doc = Jsoup.parse(pageSource);
String someValue = doc.getElementsByAttributeValue("id", "specificValue");
答案 7 :(得分：0)
我已经制作了更好的@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");
}
});
});
});
答案 8 :(得分：0)
在这里查看此示例http://codepen.io/LukeXF/pen/yOQWNb，您可以在页面加载和页面调整大小上使用一个简单的函数来实现神奇的效果。
<manifest>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
...
<application>