动态调整文本大小以填充div [duplicate]

时间：2023-01-27 17:37:43

This question already has an answer here:

这个问题已经有了答案:

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.

我一直在寻找调整div中文本大小的解决方案，以使文本填充整个div的高度和宽度，但没有任何效果。

I have made some images to help understand this problem: 动态调整文本大小以填充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.

这是一个简单的div，设置了高度和宽度。这个高度和宽度不会改变，框中的文本会改变!我要做的是让文本填充div的宽度和高度就像下面的图片一样。

动态调整文本大小以填充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 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?

这个问题甚至可以用简单的CSS解决吗?或者我需要做一些javascript/jQuery吗?

3 个解决方案

#1

7  

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

OP为此做了一个jQuery插件，你可以在这里下载

It doesn't seem to up to date though!

但它似乎不最新!

Good luck!

好运！

#2

3  

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.

您可以使用FitText。js (github页面)解决了这个问题。与TextFill相比，它非常小且高效。TextFill使用了一个昂贵的while循环，而FitText则没有。

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

FitText也更灵活(我将它用于非常特殊的需求，工作起来像冠军!)

HTML:

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:

CSS:

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

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

如果你需要它，FitText也有一个非jquery版本。

#3

0  

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.

我的猜测是，这不是你能用CSS做的事情。字体中没有任何百分比的概念(据我所知)。您可能需要使用Javascript。

#1

7  

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

OP为此做了一个jQuery插件，你可以在这里下载

It doesn't seem to up to date though!

但它似乎不最新!

Good luck!

好运！

#2

3  

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.

您可以使用FitText。js (github页面)解决了这个问题。与TextFill相比，它非常小且高效。TextFill使用了一个昂贵的while循环，而FitText则没有。

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

FitText也更灵活(我将它用于非常特殊的需求，工作起来像冠军!)

HTML:

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:

CSS:

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

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

如果你需要它，FitText也有一个非jquery版本。

#3

0  

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.

我的猜测是，这不是你能用CSS做的事情。字体中没有任何百分比的概念(据我所知)。您可能需要使用Javascript。

标签：

相关文章