Установите ширину div на многострочный интервал

Question

Я хочу иметь div с заданным max-width, который плотно соответствует ширине его ребенка span. Все работает нормально, пока span - это только одна строка, но как только произойдет разрыв строки, родительский div будет иметь максимальную ширину.

.content { 
 
    margin: 10px; 
 
    max-width: 150px; 
 
    border: 1px dotted black; 
 
    display: inline-block; 
 
}

<div class="content"> 
 
    <span>1 line works</span> 
 
</div> 
 
<br> 
 
<div class="content"> 
 
    <span>2 lines dont workworkwork</span> 
 
</div>

Первый ДИВ имеет плотную посадку, второй DIV однако устанавливается при максимальной ширине - но это может быть крепче, и я хочу его крепче. См. Также мою ручку на http://codepen.io/sheinzle/pen/gpVjbG

Получает более плотную посадку, даже возможную в HTML?

Answer 1

Спасибо за ответы на все вопросы так далеко. Я все еще очень надеюсь, что у кого-то есть чистое решение HTML/CSS.

В то же время, это быстрое исправление с помощью JavaScript (CSS/HTML без изменений от OP). Вероятно, он не улавливает все крайние случаи, но сейчас работает. Перо в http://codepen.io/sheinzle/pen/MwNdgO

document.addEventListener("DOMContentLoaded", function(event) { 
 
    // get list of all spans 
 
    list = document.querySelectorAll('.content span'); 
 
    for (var i=0; i<list.length; i++) { 
 
    // retrieve width of span and apply it to parent 
 
    w = list[i].offsetWidth; 
 
    list[i].parentNode.style.width = w+"px"; 
 
    } 
 
});

.content { 
 
    margin:10px; 
 
    max-width: 150px; 
 
    border:1px dotted black; 
 
    display:inline-block; 
 
}

<div class="content"> 
 
    <span>1 line works</span> 
 
</div> 
 
<br> 
 
<div class="content"> 
 
    <span>2 lines do workworkwork</span> 
 
</div>

Answer 2

Добавить word-break: break-all; в .content

Вот это demo

Answer 3

Добавлено max-width: 150px; обоим div и span

.content { 
 
    margin:10px; 
 
    max-width: 150px; 
 
    border:1px dotted black; 
 
    display:inline-block; 
 
    
 
} 
 

 
.test{ 
 
    max-width: 150px; 
 
    display:inline-block; 
 
    word-break:break-all 
 
}

 

 
    <div class="content"> 
 
     <span class="test">1 line works</span> 
 
    </div> 
 
    
 
    <br> 
 
    
 
    <div class="content"> 
 
     <span class="test">2 is this what you wantsimon</span> 
 
    </div>

Answer 4

Использование Flexbox и поместите стиль на внутренней пролете:

.content { 
 
    margin:10px; 
 
    max-width: 150px; 
 
    display: flex; 
 
} 
 
.content span{ 
 
    flex: 0 1; 
 
    border:1px dotted black; 
 
}

<div class="content"> 
 
    <span>1 line works</span> 
 
</div> 
 

 
<br> 
 

 
<div class="content"> 
 
    <span>2 lines alsoworkhere</span> 
 
</div>