CSS text wrapping collapse container

Question

Я ищу решение HTML/CSS для проблемы, с которой мы столкнулись на сайте, который мы создаем. Я с удовольствием реализую решение на основе JavaScript, если нужно, но я бы предпочел, чтобы он обрабатывался изначально.

У нас есть контент, управляемый текстом, который должен находиться в определенной области, но обернуть, если он превышает доступную ширину. За текстом находится цвет фона с непрозрачностью.

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

HTML

<div> 
    <p>Crack the Shutters Open Wide for Parkside Paradise</p> 
</div> 

CSS

body div { 
    background-color: #AAFF3B; 
    max-width:80%; 
    padding:20px; 
    display:inline-block; 
    float:left; 
} 
body p { 
    display:inline-block; 
    background-color: #FFAA3B; 
    position: relative; 
    float:left; 
    white-space:pre-line; 
    clear:left; 
} 

Вот JSFiddle: http://jsfiddle.net/nmuot8bm/3/

Если посмотреть на 3-м, например, вы можете увидеть небольшое количество дополнения на правой стороне оранжевой коробки, где слово porttitor имеет обертку d под новой строкой, но оранжевый контейнер все еще сидит на максимальной ширине, несмотря на поплавок. Если разрывы строк вводятся редакторами содержимого (например, между vestibulum и porttitor в соответствии с примером 4), тогда контейнер сбрасывается правильно.

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

Вот фотография моего тестового примера показано на JSFiddle:

Вот картина неисправности на месте промежуточной (до отделяется в JSFiddle):

Вы можете увидеть что текст завернут, но контейнер не рухнул, оставив большой пробел цвета фона.

n.b. Мы можем эмулировать это, выполнив text-align:justify, но затем расстояние между словами не согласуется с остальной частью текста на сайте.

Редактировать: Я вижу, что этот вопрос может быть дубликатом. Клянусь, что я занимался исследованиями до того, как отправил!

max-width adjusts to fit text?

CSS Width/Max-Width on Line Wrap?

Wrapping text forces containing element to max-width

Shrink DIV to text that's wrapped to its max-width?

Я думаю, что общий консенсус/вывод состоит в том, что невозможно без кровотечения края CSS, и я должен использовать решение JavaScript.

Я добавил несколько примеров в моей JSFiddle: http://jsfiddle.net/nmuot8bm/6/ включая решение JavaScript отсюда: https://stackoverflow.com/a/33246364/647728

Answer 1

Не возможен с помощью CSS ... это способ модели строкового блока работает JS пример/решение может быть найдено на JSFiddle

Answer 2

Если проблема плавал элементы рушатся родительский контейнер, есть много решений; самым простым среди них является добавление overflow: hidden или display: table к родительскому объекту (дело сворачивается). Также имейте в виду, что inline-block и плавающие элементы по существу являются избыточными.