CSS: принудительная перенос текста (ИЛИ определение ширины элемента только одним из его дочерних элементов) - PullRequest
Новая
       33

CSS: принудительная перенос текста (ИЛИ определение ширины элемента только одним из его дочерних элементов)

5 голосов
/ 18 мая 2009

Хорошо, это странно для меня. Вот элемент HTML, с которым я работаю:

LOLZ http://www.ubuntu -pics.de / bild / 14571 / screenshot_030_0O2o3D.png

Фото с подписью. В идеале мне бы хотелось, чтобы это выглядело так, используя чистый CSS:

альтернативный текст http://www.ubuntu -pics.de / bild / 14572 / screenshot_031_mp84u7.png

Ширина родительского элемента изображения должна зависеть от размера изображения.

Я могу изменить разметку все, что мне нужно. (Текст в настоящее время не находится в своем собственном div, но это может быть при необходимости.) Есть ли способ в CSS для этого? У меня складывается впечатление, что мне нужно «заставить» текст обернуть как можно больше (что не представляется достижимым) или сделать ширину всего элемента зависимой только от одного элемента и игнорировать другой (чего я никогда не слышал до).

Есть ли реальный путь? Или мне нужно использовать волшебный Javascript вместо этого? (Решение JS довольно простое, но довольно слабое ...)

Ответы [ 6 ]

3 голосов
/ 18 мая 2009

Ознакомьтесь с этой замечательной статьей о лучших способах обработки сценария "изображение с подписью".

Лично это один из тех случаев, когда ты должен смириться с этим и пойти на это.

0 голосов
/ 19 мая 2009

Я придумал рабочее и довольно чистое решение.

Решение использует таблицу (или div с display: table, если вы предпочитаете) и добавляет второй столбец, чтобы «вставить» первую ячейку в минимальное пространство, которое ей действительно нужно. Таблица может быть установлена ​​на ширину 1px, чтобы она не росла по всей странице. Я собрал демо, чтобы показать это в действии:

http://test.dev.arc.net.au/caption-layout.html

Протестировано и работает в IE8, Firefox и Safari / Win

0 голосов
/ 19 мая 2009

Вот решение, которое, вероятно, не работает для вас, даже если оно производит запрошенный макет: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style>
div.a {float: left;
        position:relative;}

div.b {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: center;
        background-color:gray;}

</style>
</head>

<body>

<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>

</body>
</html>

Вы видите причину, по которой неудовлетворительно, если вы размещаете какой-то контент ниже div a. Он будет перекрываться с заголовком, поскольку абсолютно позиционированный заголовок не расширяет родительский элемент div по вертикали. Это все еще может работать для вас, если у вас все равно достаточно пустого пространства или вы хотите зарезервировать его.

0 голосов
/ 19 мая 2009

Хорошо, похоже, нет простого решения, которое я мог бы осуществить. Спасибо, что помогли мне разобраться:)

Я думаю, что учитывая то, как я буду хранить эти изображения, доступ к ширине не потребует постоянного пересчета. Я могу просто использовать эту магию на стороне сервера.

Спасибо!

0 голосов
/ 18 мая 2009

Ответ table будет работать. Без труда. Я не могу поощрять его использование, но простота использования имеет свои преимущества. Я собирался предложить использовать свойство CSS clip:, но не могу заставить его работать на моей локальной машине (по какой-то причине, хотя он отображает пример в cssplay.co. Великобритания отлично).

Недостатком этого является то, что это, вероятно, работает, только если вы определите фиксированную ширину для контейнеров. Я уверен, что должен быть способ, хотя. Я буду продолжать искать.

0 голосов
/ 18 мая 2009

Сделать контейнер таблицей с разметкой таблицы: исправлено и поместить изображение в верхний ряд. Вы также можете сделать это с помощью чистого CSS, используя свойства display: table- * (и библиотеку IE7-js для совместимости с IE6).

Что делает таблица-макет: исправлено, так это заставляет алгоритм рисования таблицы блокировать ширину каждого столбца таблицы, как только станет известна ширина первой ячейки в этом столбце. Заголовок некуда будет расширять, поэтому он будет перенесен на ширину изображения (первая ячейка).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...