Question

I have this example: http://jsfiddle.net/WkpL9/
HTML:

<div class="span2">
    <div class="image-container">
        <img alt="" src="http://placehold.it/150x120"/>
        <p>asdadsadasdasdsadasdasdasdasdsadsad</p>
    </div>
</div>

CSS:

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;
}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;
}

I would like the caption of the image to be:
1. positioned over the image (in the top layer).
2. placed vertically in the bottom of the image.
3. with ellipsis.
4. will not get out of the wrapping div.

Is this possible?

I am using twitter bootstrap.

Answer 1

I would do that with position: relative; and position: absolute;, like so:

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;

    position: relative;

}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;

    position: absolute;
    top: 0;
    left: 0;

    text-align: center /* Not sure if I misunderstood you with this */

}


.image-container img {
    margin-top: 15px;
}

Regarding the ellipsis, then you can add this: … after the text. Was that what you meant?