Dynamically resize text to fill div [duplicate]_问答_开发者

Dynamically resize text to fill div [duplicate]

开发者 https://www.devze.com 2023-01-28 23:14 出处：网络

This question already has answers here: Auto-size dynamic text to fill fixed size container (21 answers)

This question already has answers here: Auto-size dynamic text to fill fixed size container (21 answers) Closed 8 years ago.

I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.

I have made some images to help understand this problem:

Dynamically resize text to fill div [duplicate]

So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.

Dynamically resize text to fill div [duplicate]

I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow, text-aligning all not giving me the result I want.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            #box1, #box2{ 
                width: 400px;
                height: 300px;
                color: white; 
                margin: 10;
                font-size:larger;
                text-align:justify;
                letter-spacing: 100%;
            }

            #box1 { background-color: green;}
            #box2 { background-color: blue;}
        </style>
    </head>

    <body>
        <div id="box1">
            Llorem ipsum foo开发者_JAVA百科 bar baz
        </div>
        <div id="box2">
            Foobar
        </div>
    </body>
</html>

Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?

As I said this may be a dupe of

Auto-size dynamic text to fill fixed size container.

The OP did a jQuery plugin for that means, you can download it here

It doesn't seem to up to date though!

Good luck!

You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.

Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).

HTML:

<div class="container">
  <h1 id="responsive_headline">Your fancy title</h1>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

You also can set options to it:

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

CSS:

#responsive_headline {
   width: 100%;
   display: block;
}

And if you need it, FitText also has a no-jQuery version.

My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.