如何在HTML和CSS中创建图像大小内的固定文本区域

Question

基本上我有一个图像，里面有文本，如下图所示：

contained_text

但是当我调整窗口大小时；跌倒"；屏幕的：

未包含的文本

这是HTML:

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

这就是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;
}

有没有办法解决这个问题，这样文本就不会从屏幕图像中掉出来？

Answer 1

当您调整屏幕大小时，<img>标记内的文本大小需要更改，因此您还必须更改文本容器的大小，或者通过将overflow: hidden;添加到.text元素来隐藏溢出的文本。