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

Question

我需要一个 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;
}

非常感谢

Answer 1

如果更改文本更短可以解决问题，请将这些样式添加到文本中：

overflow: hidden;
max-width: as much as you need to make your txt short;
white-space: nowrap;
text-overflow: ellipsis;