Responsive text break in CSS isn't working for me. How can I get it to work?

Question

is there a way to make text responsive such that the text size changes the same, but the text gets pushed to the lines below as the width of its container decreases? I added examples of what I mean:

versus

I tried fitting the text for a webpage I was working on with setting width and max-width to percentages, but it doesn't working. This is the result I get (the faint rectangle being the border of the div I was using to contain the text):

This is my HTML code:

<div id="about-me-box">
    <p class="mono" id="aboutme">.about-me</p>
    <div class="ABOUT-ME">
        <p class="main-text" id="box_1">I’m currently a sophomore Computer Science student at - University. I’ve worked with these technologies so far:</p>
    </div>
</div>

And this is my CSS code:

.ABOUT-ME {
    display:inline-block;
    position:absolute;
    top:110px;
    z-index:4;
    width:100%;
    white-space: nowrap;
    margin:auto;
    height:300px;
    left:50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    border:1px solid rgba(255, 255, 255, 0.15)
}
#aboutme {
    display:flex;
    color:#000;
    position:absolute;
    background-image: linear-gradient(90deg, #FFE600, #00fbff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:50px;
    top:0px;
}
.main-text {
    font-family: 'Inter', sans-serif;
    display:inline-block;
    padding:5px;
    margin:5px;
    top:50px;
    position:absolute;
    color:#c0c0c0;
    line-height:30px;
    max-width:200px;
}

If anyone has a solution, it would be really appreciated, thanks

Answer 1

apply font-size in vw - viewport-width unit. That will give you what you're trying to achieve.

Run the code snippet and click on the expand snippet to see it adjusting the size but the wraps remaining the same as in the initial text.

But keep in mind that if you change any width or padding for the element or its parent in media-query then you'll have to tweak the font-size according to that as well.

 p { font-size: 2vw; }

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis eu enim nec blandit. Ut non ligula eu felis ornare consectetur. Mauris vulputate hendrerit placerat. Ut nibh diam, pulvinar quis euismod eget, condimentum ac augue. Fusce vitae ullamcorper mauris. Sed porttitor, augue vel laoreet semper, odio eros pellentesque orci, nec tristique arcu orci eu metus. Pellentesque euismod nibh auctor porttitor sodales. Vestibulum nisi metus, venenatis ac vestibulum sit amet, aliquet a lectus. Praesent mollis sem mauris, ut porta libero cursus nec. Mauris iaculis cursus orci, et vestibulum augue ultrices a. Quisque laoreet tempus neque in varius. Donec eu arcu et leo molestie maximus nec quis erat.</p>