一尘不染

如何自动更改div内的文本大小?

html

我有带的背景图片div。我想写一些文本,但是此文本应通过更改字体大小div


阅读 242

收藏
2020-05-10

共1个答案

一尘不染

我以这种方式理解了您的问题,您希望将某些文本放入具有固定尺寸的给定div中,如果div太小而无法显示所有文本,则应缩小字体大小,直到文本适合div。如果那是重点,这是我的解决方案。

这是一个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将完成工作。

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