CODEWITHSUNDEEP
javascripthtmlcss
Melly
Melly

Reputation: 745

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

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

enter image description here

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

enter image description here

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?

Upvotes: 0

Views: 65

Answers (2)

KarThik Ch
KarThik Ch

Reputation: 1

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;
}

Upvotes: 0

Shashini Prabodha
Shashini Prabodha

Reputation: 190

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>

Upvotes: 1

Related Questions