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

Question

我绝对将文本定位在图像之上，如果文本在图像上扩展，我想截断它。如果定义了文本的宽度，这将不是问题。但是，图像上的文本块设置为 100%，并位于图像的底部。

如果文本扩展通过图像，如何隐藏文本？

查看我的示例：http: //jsfiddle.net/qhFUL/

Answer 1

设置overflow为hidden：

.box {
  overflow: hidden;
}

演示：http: //jsfiddle.net/qhFUL/1/

Answer 2

如果您还想防止文本换行（因此它不会隐藏图像），您可以这样做：

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

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

这将截断长文本而不是换行。

Answer 3

您还可以在 .text div 上指定一个高度，这样它就会被截断而不是换行。

然后你可以添加一个小的 jQuery 省略号脚本来美化它......

http://yue.st/notes/code/js/ellipsis.en.html

或者

https://github.com/rmorse/AutoEllipsis

好的... ：）