Question

我正在尝试调整文字大小以便填充某个空间

例如：所以，我们可以说我的HTML是这样的：

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

我想要“一些文字”这个词自动填充120px知道“某些文字”可能是什么！我不在乎字体宽度是否被拉伸或者是否已在字中添加了一些空格以使其适合120px宽度。

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

overflow:hidden;会隐藏120px之外的任何额外字符 overflow:scroll;会制作一张我不想要的卷轴！

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

Answer 1

您可以使用以下脚本调整字体到可用空间：

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()});

Demonstration

Answer 2

使用text-align: justify

对齐文字

用文字填充空格

2 个答案: