Question

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

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

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

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

Answer 1

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

Answer 2

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

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

你必须在外面的DIV上使用字体大小才能获得合适的效果。

Answer 3

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

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

Answer 4

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

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

Answer 5

可以使用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"});
});
});

希望这有帮助！我发布了一个相同的问题，主持人说这是一个偏离主题的问题：）

如何使字体大小适应div-size？

5 个答案: