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

Question

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

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

.img{
    position: relative;
}

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

但是，使用此代码，长文本将溢出并跑出图像。即使我使用absolute，也可以尊重父母的尺寸吗？

谢谢！

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;
}