How to constrain the text overflowing within a container? - html

Question

I'm working on a free-code-camp project and when I try to shrink this site the text
overflows from the container which width is set to "auto". The text is overflowing from the bottom and I have no idea why.
I have tried height: auto, height: 100%, etc., but nothing works.
Markup:
<section id="product-info">
<img class="background-image" src="https://i.postimg.cc/50G4sHcs/water-
2208931.jpg" alt="">
<div class="product-info-wrapper">
<h1 class="product-info-title">Why our bottles?</h1>
<p class="product-description">We offer bottled water cared for from
end to end with the idea of nothing ever becoming "waste". Our Better
Bottle and label are made from plants, non toxic and compostable. We
also offer collection for the bottles we sell, taking responsibility
for our product post-sale and making sure that every bottle returned,
ends up in the correct facility, not the environment. We have been
developing our plant-based cap as currently, only plastic options are
available. The way we see it, if we
are using plastic, it should be made from naturally renewable
materials and hold the ability to disappear after its useful life </p>
</div>
</section>
CSS:
#product-info {
width: 100%;
position: relative;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 600px;
filter: blur(1px) grayscale(70%);
}
.product-info-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
/* background: white; */
height: 100%;
color: white;
}
.product-info-title,
.product-description {
font-family: "Open Sans", sans-serif;
}
.product-info-title {
font-family: "Kalam", cursive;
/* text-decoration: underline #271F30; */
text-transform: uppercase;
letter-spacing: 5px;
font-size: 35px;
}
.product-description {
width: 80%;
line-height: 1.8;
/* height: 150px; */
/* padding: 10px 20px 25px ; */
}
I want the text to be responsive when I resize the window and I don't want to hide it, I just want it to shrink responsively.
Could you please advise me?

Answer 1

Add word-wrap: break-word to your CSS
For text responsiveness you can use vw units https://www.w3schools.com/cssref/css_units.asp

Answer 2

Just dynamically adjust the font size to the available screen width.
Do your custom calculation as the default:
.product-description {
font-size: calc(10px + (100vw / 200));
}
Then, set a maximum width with a media query
#media screen and (min-width: 800px) {
.product-description {
font-size:16px;
}
}
The example above has a minimum font-size of 10px, increased by 1 for each available 200px screen width. For instance: screen width: 600px => font-size 13px
Still, you need to handle long text with care. You may reach a point, where a "read more" button/link is unavoidable.
PS: object-fit is not supported on IE. If you rely on that browser, rework your css to use:
background-image: url"(myImage.jpg"); background-size: cover;

Answer 3

*{
word-break: all;
}
you can use any selector you want :)
I hope it helps.