Question

我有一个固定有高度和大文本的div。例如：http://jsfiddle.net/gEjTz/我想要重新调整文本以显示在此div中。这该怎么做？谢谢！

<div style="height: 20px; border: 1px solid black;">
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit ssssssssssssssssssssssssssssssss s</span>
</div>
$(function() {
    var span = $('span');
    var fontSize = parseInt(span.css('font-size'));

    do {
        fontSize--;
        span.css('font-size', fontSize.toString() + 'px');
    } while (span.height() >= 20);
});

Answer 1

不知道你是否想保留span ...我将它设置为没有那个......对不起，如果你需要它

使用Check with jquery if div has overflowing elements中的想法，我为您设置了jsfiddle。

你只需要检查是否触发了元素溢出，并在发生这种情况时减少font-size。

但是为了用户的利益，我建议你保持一个恒定的字体大小并将overflow: auto;添加到父div

Answer 2

如果您想要固定尺寸的框，则无法设置font-size。如果要设置font-size，则无法设置尺寸。你需要这样做：

<div style="display:inline; border: 1px solid black;">
<span style="font-size: 50px;">This is my text that I want to fit ssssssssssssssssssssssssssssssss s</span>

在此观看：JSFiddle

修改的 JSFiddle changed

高度固定，文字大的Div

2 个答案: