Wie man die Größe von div an die besten Inhalte anpasst, wie bei Facebook Chat?

Question

Dies ist die Wirkung Ich versuche zu erreichen:

Dies ist eine Facebook-Chat-Nachricht, bemerken, wie die Breite des Elements genau um ihre Textinhalte beruhen.

Wenn ich ändern Sie den Text, den ich innen schreiben, die Größe der <div> Änderungen:

Ich versuche, das gleiche mit dem folgenden Layout zu tun:

<div>Test message that goes ontothenextline</div> 

Und CSS:

div { 
    max-width: 190px; 
    // other arbitrary styles 
} 

Aber das ist wh Ich bekomme (als ein grundlegendes Beispiel): https://jsfiddle.net/dr76t4t7/

Wie kann ich die <div> besser den Inhalt des Textes innerhalb machen?

Answer 1

Sie vermissen die display: inline-block und die Polsterung.

.speech-bubble { 
    display: inline-block; 
    max-width: 190px; 
    background-color: #e1edff; 
    border: 1px solid #bdc7d6; 
    color: #4f5359; 
    text-shadow: 1px 1px 0 #fff; 
    padding: 8px 12px; 
    box-sizing: border-box; 
    border-radius: 15px 0 15px 15px; 
} 

https://jsfiddle.net/q35qmkgx/3/

Answer 2

dieses https://jsfiddle.net/q35qmkgx/7/

div { 
    background-color: blue; 
    color: white; 
    display:inline-block; 
    max-width:190px; 
    padding:5px; 
    word-break:break-all; 
}