我试着用Bulma CSS使这个块图像带有文本。我尝试了很多东西（相对，z-index等），但我没有成功为台式机或移动设备做一些很棒的东西。每一次，文本都被溢出或得到框外。我无法设置标题字符限制，所以如果可能，我也尝试在第二行使用断字。

下面是我正在寻找的示例：

以下是我的HTML：

<div class="block_article" data-overlay>
   <img src="/static/img/{{ article.image }}" alt="" />
   <a href="/a/{{ article.slug }}.html"><span>{{ article.name }}</span></a>
</div>

和当前CSS（不工作）：

.block_article {
    position: relative;
    width: 500px;
    height: 250px;
}

.block_article span {
    position: absolute; 
    top: 50px;
    left: 5%; 
    width: 100%;
    color: white;
    text-shadow: 2px 2px black;
    font-size: 1.3em;
}

结果：

有没有一些关于这种事情的提示，或者Bulma的扩展？

谢谢你的帮助！