1

我正在尝试调整文本大小，以便它可以填充一定的空间

例如：所以，假设我的 HTML 是这样的：

<h1 style="width:120px;">some text</h1>

我想让“一些文本”这个词自动填充 120 像素，因为我知道“一些文本”可以是任何东西！我不在乎字体宽度是否被拉伸或是否在单词中添加了一些空格以使其适合 120px 宽度。

我知道在 CSS 中我们有overflow:hidden;，overflow:scroll;但是这两个对我没有任何帮助

overflow:hidden;将隐藏 120px 之外的任何额外字符 overflow:scroll;会产生我不想要的滚动！

任何解决方案？也许是一个 Jquery 插件或什么？我到处找，但我什么也找不到。

4

2 回答 2

2

您可以使用这样的脚本使字体适应可用空间：

var fontSize = 100;
var reduce = function() {
    $('#txt').css('font-size', fontSize);
    $('#mes').html(fontSize);
    if ($('#txt').width()>MAX_MIDTH) {
       fontSize -= 1;
        reduce();
    }
};
reduce();
$('#width, #height').change(function(){fontSize = 100;reduce()});

示范

于 2012-11-25T20:56:01.930 回答
1

使用对齐文本text-align: justify

于 2012-11-25T20:54:46.700 回答