css - 圆形图像上文本的 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;
}

非常感谢

标签： cssimagebackground

Answer 1

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

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