圆形图像上文本的CSS背景横幅

我需要一个CSS魔术，解释一下 我有这张照片

我想添加一条如下的背景条纹：

但是使用css，因为有时候文本对于一行来说太长了，会转到新的一行

以下是用于使文本与图像重叠的css用户类：

.image-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.text-container {
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 41%;
    text-align: center; 
    width: 100%; 
    font-size: 24px;
}

---

非常感谢

如果将文本缩短可以解决问题，请在文本中添加以下样式：

溢出：隐藏；
最大宽度：尽可能地缩短txt；
空白：nowrap；
文本溢出：省略号