CSS在Fluid Image顶部截断文本

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

很好......：）