How can I create a fixed text region within image size in HTML and CSS?

Question

Basically I've an image with text inside it as seen in the image below:

contained_text

But when I resize the window, the text "falls out" of the screen:

uncontained_text

This is the HTML:

  <div class="container">
    <img class="cpu" src="images/cpu.png" alt="cpu-img">
    <div class="text">
      <!-- text here -->
    </div>
  </div>

And this is the CSS:

.container {
position: relative;
padding-top: 100px;
background-color: #222831;
color: #EEEEEE;
}

.cpu {
width: 21%;
padding-top: 40px;
}

.text {
position: absolute;
top: 46.5%;
left: 40%;
width: 20%;
word-break: break-word;
}

Is there a way to fix this issue so text doesn't fall out of screen image?

Answer 1

When you resize your screen, the size of your text inside the img needs to be changed, so you have to change the size of text container as well or hide the overflow texts by add: over-flow:hidden to the.text element.