Caption

by a1ex

HTML

<div class="caption">
    <img src="http://avt.foto.mail.ru/bk/ae_design/_avatar" alt="Alex" />
    <span>Подпись под картинкой</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet orci et tortor iaculis tincidunt. Donec non dui eros, in ullamcorper odio. Donec volutpat orci eget sapien tincidunt congue. Suspendisse sed ante libero. Vivamus nec ligula a velit pulvinar interdum. Vivamus bibendum felis nisl, ac eleifend leo. Morbi consectetur diam luctus nisl blandit ultricies lacinia neque cursus. Aliquam posuere tempus tincidunt. Duis nibh nisi, euismod id convallis in, eleifend a mi. Suspendisse magna urna, luctus in ornare quis, pretium in sem. Nullam justo lectus, auctor porta pellentesque vitae, suscipit a nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur cursus malesuada. Pellentesque placerat ultricies erat, ac ornare mauris semper quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<div class="caption">
    <img src="http://content.foto.mail.ru/bk/ae_design/_myphoto/p-10.jpg" alt="Alex" />
    <span>Длинная подпись под картинкойПодписьПодКартинкойВОднуСтроку</span>
</div>
<div class="caption">
    <img src="http://avt.foto.mail.ru/bk/ae_design/_avatar" alt="Alex" />
    <span>Длинная подпись под картинкой</span>
</div>
<p>Morbi adipiscing auctor odio eget egestas. Nulla facilisi. Etiam leo mauris, lacinia et consectetur eu, dictum eget quam. Cras ac lobortis nisl. Mauris quis lacus ac leo feugiat pharetra. Donec at mi et arcu consectetur placerat a sit amet leo. Fusce laoreet quam non dui posuere a iaculis odio aliquam. Nullam vehicula porttitor diam, sed rutrum dui aliquam sit amet. Sed velit lorem, egestas nec consectetur id, auctor ac eros. Donec purus mi, sollicitudin ac tristique nec, sodales id odio. In aliquam...

CSS

body { padding:20px; font:15px/1.5em Arial, Helvetica, sans-serif; position:relative; }
p { margin:0.3em 0 0.5em; }
.caption { float:left; font:10px/15px Arial, Helvetica, sans-serif; position:relative;  padding:10px 10px 40px; /* 2 строки * 15px + 10px */ margin:0 15px 5px 0; border:1px solid #ccc; border-radius:10px; box-shadow:3px 3px 10px rgba(0,0,0,.2); }
.caption span { display:block; left:10px; right:10px; position:absolute; height:30px; /* 2 строки * 15px */ overflow:hidden; text-overflow:ellipsis; }