Как метод CSS «Shrinkwrap» может работать с max-width и без тега разрыва строки BR?

Question

Я пытаюсь создать ограничивающую рамку максимальной ширины, которая будет переносить текст (на пробелах, запрещенных переносах слов) и сокращать ширину самой длинной строки текста.Демонстрацию различных методов термоусадочной пленки см. http://www.brunildo.org/test/IEMshrink-to-fit.html

. Я выбрал метод «float», но в моем тестировании ни один из методов не достиг желаемого эффекта.

В примереПриведенный ниже код (также доступен с live-preview на jsbin ), я покажу, что происходит, когда вы позволяете словам переноситься, и что происходит, когда вы вставляете тег перевода строки <br />.Использование <br /> вручную дает именно тот эффект, который я ищу, при этом пропуская его, вы оборачиваете текст правильно, но заставляет белое поле принимать всю максимальную ширину в качестве ширины, чего я бы хотел избежать.

<style>
  div#wrapper { background: #ddd; padding: 10px; }
  header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
  #wrapper:after { content: " "; clear: both; display: table; }
</style>

<div id="wrapper">
  <header>
     <h1>Diane Von Furstenberg</h1>
  </header>
  <header>
    <h1>Diane Von<br />Furstenberg</h1>
  </header>
</div>

Вот скриншот проблемы с некоторыми уточнениями:

Я создал метод JS для ручной вставки тега <br /> в видемера, но я думаю, что должен быть какой-то способ сделать это правильно, используя только CSS / HTML.Спасибо за помощь!

Answer 1

Изменение отображения h1 на заголовок таблицы близко к тому, что вы хотите, в Google Chrome.Но он не идеален, и я не могу рекомендовать его в качестве решения от всей души, в основном из-за того, что не тестировал его в других браузерах.

Answer 2

Не уверен, изменилось ли поведение браузера после публикации более раннего ответа «подпись к таблице», но в настоящее время он не работает (с использованием Chromium 41):

InВ действительности, кажется, что желаемое поведение невозможно с чистым CSS (по состоянию на 2015 год).Дополнительное объяснение и легкий обходной путь Javascript доступны в другом вопросе SO: максимальная ширина регулируется, чтобы соответствовать тексту?