如何自动改变div中的文本大小？ [英] How to automatically change the text size inside a div?

问题描述

我有一个带有 div 的背景图片。我想写一些文本，但这个文本应该通过 div 更改字体大小。

I have a background image with a div. I want to write some text, but this text should change the font size through the div.

推荐答案

我以这种方式理解你的问题，你想要将一些文本适合一个固定维度的给定div，如果div是小的，为了显示所有文本，字体大小应该缩小直到文本适合div。如果这是点，这里是我的解决方案。

I understand your question this way, you would like to fit some text into a given div with a fixed dimension, and if the div is to small, to show all the text, the font size should be shrinked until the text fits into the div. If that's the point, here is my solution.

下面是一个jQuery实现的示例：http://jsfiddle.net/MYSVL/2/

Here is an exmaple with a jQuery implementaion: http://jsfiddle.net/MYSVL/2/

有一些div

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

固定大小

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

这将由JavaScript来完成。

This JavaScript will do the job.

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

这篇关于如何自动改变div中的文本大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！