how do you make text in html smaller every time it doesn't fit in the container

Question

So I have a simple html and css setup that looks like this

HTML:

<div class="box">
  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquid id est placeat dolorem velit explicabo.</p>
  
</div>

CSS:

.box{
  height: 100px;
  width: 300px;
  background-color: blue;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%)
}

and it looked like this

but then if I add more characters to it, it will spread outside of the containers which is expected

but how do you make it so that if the text were to spread out it will shrink instead to keep it inside of the container?

By "shrink"what do you mean? reduce in size to smaller font, cut some off - presumably the end; or just not show the text that is outside of the block like your last image? — Mark Schultheiss, Sep 11 '21 at 05:37
Does this answer your question? [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — Mark Schultheiss, Sep 11 '21 at 05:41

score 1 · Answer 1 · answered Sep 11 '21 at 05:20

You can remove height attribute...

 .box{
  width: 300px;
  background-color: blue;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="box">

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquid id est placeat dolorem velit explicabo.</p>

</div>
</body>
</html>

score 0 · Answer 2 · edited Sep 11 '21 at 09:53

0

Just add overflow to css.

.box {
  height: 100px;
  width: 300px;
  background-color: blue;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
}

edited Sep 11 '21 at 09:53

RobC

22,977
20
73
80

answered Sep 11 '21 at 06:32

KarThik Ch

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 11 '21 at 06:51

how do you make text in html smaller every time it doesn't fit in the container

2 Answers2