Длинное название работы в элементе галлереи.

[denisator]

Здравствуйте.

 

Никак не могу сообразить как сделать что бы длинное название работы переносилось по строчкам учитывая что высота картинок фиксированная, а ширина плавующая?

 

Код элемента галлереи:

<style>	div.gallery_detail_item {float: left; margin-right: 10px; height: 250px;}	div.gallery_detail_works img {height: 150px;}	div.gallery_detail_item_name {}	div.gallery_detail_item_autor {}</style><div class="gallery_detail_item">	<a href="">		<img src="imgUrl">	</a>	<div class="gallery_detail_item_name">		Работа с ну совсем уж очень длинным названием	</div>	<div class="gallery_detail_item_autor">		<a href="">Денис Ковальчук</a>	</div></div>

[SelenIT]

Сходу на ум приходит только вариант с display: table и очень маленькой шириной для контейнера, которая благодаря «особой табличной магии» работает как желаемая ширина, но фактически блок растягивается по картинке.

 

Может быть, кто-нибудь подскажет вариант лучше (хотя лично я в display:table, примененном прицельно и к месту, ничего зазорного не вижу).

[amelice]

Илья, объясни пожалуйста почему именно по фотке? http://jsfiddle.net/wfp9rjjL/1/
Честно уже не помню, по какому принципу таблица так работает.

[SelenIT]

Точнее, по самому широкому «нескукоживаемому» элементу содержимого (это может быть и просто длинное непереносимое слово, но в данном случае скорее всего — картинка). C размерами таблиц всё вообще забавно, спецификация фактически ничего от браузеров не требует:

Браузеры не обязаны реализовывать именно этот алгоритм при определении табличной раскладки в случае, когда 'table-layout' равно 'auto'; они могут использовать любой другой алгоритм, даже если он приведет к другому поведению.

и даже в новом черновике про «размеры по контенту» раздел для таблиц содержит буквально лишь

Issue 7    ???

но на практике браузеры вроде как договорились, что указанная width для таблиц работает фактически как min-width, и если несжимаемый контент шире ее, то таблица растягивается (в отличие от других типов контейнеров, из которых такой контент торчал бы наружу).

[amelice]

Ух, здорово! Спасибо за подробный ответ! 

Только вот хочу уточнить, почему именно width: 1px? Можно же и ноль написать?

[SelenIT]

Привычка-с. Видимо, от того, что Вебкит/Блинк всё равно не дает сжать ячейку таблицы меньше пикселя, я и привык рассматривать как минимально возможную ширину ячейки именно единицу, а «доскукоживание» до нуля при надобности обрабатывать отдельно.

[amelice]

Видимо, от того, что Вебкит/Блинк всё равно не дает сжать ячейку таблицы меньше пикселя,

 

Понятно, спасибо! )