CSS Truncate Text on top of Fluid Image

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... :)