css - CSS：我可以在图像上放置文本而不会导致文本溢出吗？

Question

我想知道是否可以将文本放在图像上而不会溢出。例如，如果文本太长，则应将其截断或使用ellipsis.

这是我到目前为止所拥有的

.img{
    position: relative;
}

.text{
    position: absolute;
    top: 0;
}

但是，使用此代码，长文本将溢出并超出图像。即使我正在使用，是否可以让它尊重父母的尺寸absolute？

谢谢！

标签： css

Answer 1

您可以尝试将所有内容都放在一个 div 中

HTML

<div class="container">
    <img />
    <p class="text">SOME LONG TEXT</p>
</div>

CSS

.text{
    position: absolute;
    top: 0;
}
.img{
    width: 100%
}
.container{
    position: relative;
}