Utilizing the twitter bootstrap thumbnails successfully, we have implemented a description feature inspired by the bootstrap documentation. The distinction lies in our decision not to specify a size (e.g., .span4) for our thumbnails; instead, the content dynamically sizes them.
While this approach works well overall, we are seeking one alteration: preventing long captions from extending beyond the thumbnail's boundaries and hiding any excess length.
This task would be straightforward with fixed widths, but given that we opted against such constraints, I am uncertain how to proceed;
A link to a jsfiddle playground showcasing our dilemma: http://jsfiddle.net/BbCQK/
I initially attempted:
.caption {
max-width: 100%;
text-overflow: ellipses;
}
Unfortunately, this solution did not produce the desired outcome, as it merely stretched the container. How can I achieve the intended result?