Change font size according to the number of characters within a fixed size element

There is a div element, which has a fixed size. Also, it's okay to move to the side because there are many letters, but I'm trying not to get cut when I go down. For example,

width: 300px; height: 300px;

In this situation, how can you change the font size according to the number of characters in the element?

css web html

2022-09-21 21:31

1 Answers

I don't think it's going to be possible with a pure css. I think I should use a javascript library called TextFit. You can go through the link below and apply it according to the instructions.

https://github.com/strml/textfit

Go to the link above, download the file, and test it on HTml as follows

<html>
 <head>
   <script src="textFit.min.js"></script>
 </head>
 <body>
 <div class="box" style="width:100px; height:100px; background-color: black; color:grey;">
   How can I change the font size according to the number of characters in the element?
 </div>
 <script type="text/javascript">
 textFit(document.getElementsByClassName('box'));
 </script>

 </body>
</html>

2022-09-21 21:31

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656