0
209
Viewshow 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
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?
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
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;
}
·
Juan Pablo Isaza
Report
Answer question