Html CSS截断流体图像顶部的文本

我绝对是把文本放在图像的顶部，如果文本在图像上展开，我想截断文本。如果定义了文本的宽度，这不会是一个问题。但是，图像上的文本块设置为100%，并位于图像底部

如果文本展开并通过图像，如何隐藏文本

看看我的例子：

---

将

溢出设置为
隐藏
：

.box {
  overflow: hidden;
}

演示：
如果要防止文本也被包装（因此不会隐藏图像），可以执行以下操作：

  .box {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    white-space: nowrap;
  }

它将截断长文本而不是换行。
您还可以在.text div上指定高度，使其截断而不换行

然后，您可以添加一个小jQuery省略号脚本来稍微美化它


或


很好……：）