CSS在流体图像顶部截断文本

Question

I'm absolutely positioning text on top of images and would like to truncate the text if it expands over the image. This wouldn't be a problem if the width of the text was defined. However, the text block over the image is set to 100% and is positioned to the bottom of the image.

How do I hide the text if it expands pass the image?

Check out my example: http://jsfiddle.net/qhFUL/

Answer 1

Set overflow to hidden :

.box {
  overflow: hidden;
}

Demo: http://jsfiddle.net/qhFUL/1/

Answer 2

If you want to prevent the text from wrapping as well (so it doesn't hide the image) you can do this:

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

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

Which will truncate long text instead of wrapping.

Answer 3

You could also specify a height on the .text div so it will truncate and not wrap.

You could then add a little jQuery ellipsis script to pretty it up a bit...

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

or

https://github.com/rmorse/AutoEllipsis

nice... :)