Сделайте Div настолько широким, насколько это необходимо

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

Другими словами:

CSS

.box {
    min-width:170px;
}

.box span.title {
    font-size:24px;
    white-space: nowrap;
}

.box span.text{
    font-size:10px;
    white-space: normal;
}

HTML:

<div class="box">
   <span class="title">Title on one line</span><br />
   <span class="text">This is the main body of text which I want to wrap as
           required and have no effect on the width of the div.</span>
</div>

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

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

Ответ 1

Является this (jsFiddle), что вы пытаетесь выполнить?

Я просто добавил display: table; в .box CSS. Это расширяет основной div до ширины диапазона заголовка, но обертывает область текста.

Примечание. Вы также можете установить постоянную ширину, чтобы div не расширялся до ширины окна. Таким образом, он будет расширяться до ширины заголовка, если он больше вашей постоянной ширины, но не будет расти, если пользователь вытащит окно. В моем примере я добавил width: 100px; для демонстрации.

Ответ 2

Рабочий пример jQuery:

http://jsfiddle.net/8AFcv/

$(function() {
    $(".box").width($(".title").width());
})

Ответ 3

Для заголовков вы должны использовать теги <hN> (<h1>, <h2> и т.д.).

Без переноса текста:

white-space: nowrap;

В элементе, текст которого вы не хотите обертывать.

Рабочий пример jsFiddle

Ответ 4

Если я правильно понимаю, вы можете легко установить ту же ширину для своего текста, что и для своего названия, используя JS или jQuery, например:

$('.text').width($('.title').width())

и запустите его в jQuery (document).ready или в случае, если вы добавите его динамически

Ответ 5

Элементы блока, такие как div, расширяются до тех пор, пока содержимое не нажимает на них, если они не заданы явной шириной или высотами.

Чистое решение CSS для этого маловероятно, не устанавливая максимальную ширину на div.

Указатель на CSS:

Не включайте теги в свои селекторы (т.е. tag.class), так как вы вынуждены использовать этот тег для этого класса. Простое использование .class упростит изменение разметки (если вам нужно), а также сделает ваш класс более удобным для использования более чем одним тегом.