如何使字体大小适应 div 大小？答案

【问题标题】：How to adapt font-size to div-size?如何使字体大小适应 div 大小？
【发布时间】：2011-12-28 14:10:52
【问题描述】：

有一个固定高度和宽度的 div。这个 div 包含动态内容，文本内容。如果文本变得太长，它将“爆炸” div。当文本变得太短时，div 看起来有点空。

所以我的结论是文字短时字体变大，文字长时字体变小。

从未尝试过这样的事情，如何实现？

€：因为我已经使用 dojo 作为 js 框架，包括 jquery 或任何其他框架是没有选择的。当然还是谢谢你的回答。

【问题讨论】：

Programmatically determine Font-Size for single-line display 的可能重复项
zachleat.com/bigtext/demo
请记住，您也可以为字体大小指定 %。可能会帮助您减少编码。
最终，字体大小不在您的控制之下，而是在用户的控制之下。你将如何处理最小字体大小设置为 24px 的人？我认为，每当您面临适应设计过于棘手的概念时，应该问：这真的是好的用户体验吗？听起来像这种情况，对于一些用户，比如低视力用户，答案是“不”。

标签： javascript html css xhtml

【解决方案1】：

用 jquery 是可能的

$(document).ready(function() {
var originalFontSize = 12;
var sectionWidth = $('...').width();
$('...').each(function(){
var spanWidth = $(this).width();
var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
});
});

希望这有帮助！我发布了同样的问题，版主说这是一个离题的问题:)

【讨论】：

【解决方案2】：

在您的 DIV 中创建另一个元素并添加文本。

将 DIV 的宽度除以元素，再乘以 100，就得到了 css font-size 的百分比值。

您必须调整外部 DIV 上的字体大小才能获得合适的尺寸。

【讨论】：

【解决方案3】：

您可以使用 javascript 执行此操作，方法是使用 string.length 获取字符串的长度，然后使用 jquery .css() 方法动态设置大小 (http://api.jquery.com/css/) .或者，如果您可以在设置中执行一些服务器端脚本，您可以在页面加载之前使用内联样式设置大小。 The jquery .css method is here

编辑：在您重新编辑 dojo 之后，您可以使用相同的基本方法，但只需使用 dojo 方法而不是 jquery 方法来设置字体大小。 This tutorial 看起来很有帮助。

【讨论】：

【解决方案4】：

jQuery 可能是这里最简单的选择。如果height高于某个值，您可以使用css函数更改框的font-size吗？看看this fiddle（我已经在 Chrome 中测试过）。

$(function() {
    $('.text').each(function() {
       if($(this).height() > 30)
           $(this).css('font-size', '12px');
    }); 
});

【讨论】：

【解决方案5】：

有许多插件可能适用于此。其中之一here。

【讨论】：