variieren Boxhöhe basierend auf der Textlänge innerhalb

Question

Ich würde gerne den Inhalt von unterschiedlicher Länge Text in einer Box einpacken. Mit dem folgenden Code wird die Breite der Box für Text mit geringerer Länge angepasst. Aber die Höhe variiert nicht und Text ist nicht in der Box verpackt.

.chatbox { 
 
    border: 1px solid black; 
 
    border-radius: 3.5em/5em; 
 
    padding: 2%; 
 
    max-width: 60%; 
 
    float: left; 
 
    height: auto; 
 
    white-space: nowrap; 
 
}

<div class="chatbox"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet 
 
    facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet. 
 
</div>

Answer 1

Versuchen Sie, diese

.chatbox{ 
    border:1px solid black; 
    border-radius:3.5em/5em; 
    padding:2em; 
    max-width:60%; 
    float:left; 
} 

Sie brauchen nicht height:auto und word-wrap, die das Problem erstellen. Ich änderte die padding, um mit border-radius kompatibel zu sein.

Answer 2

nur Ihre CSS mit folgenden CSS ersetzen:

.chatbox{ 
    border:1px solid black; 
    border-radius:3.5em/5em; 
    padding:2%; 
    max-width:60%; 
    float:left; 
    height:auto; 

    word-wrap: break-word; 

} 

Answer 3

Entfernen Sie einfach white-space: nowrap es funktioniert auf diese Weise.

.chatbox{ 
     border:1px solid black; 
     border-radius:3.5em/5em; 
     padding:2%; 
     max-width:60%; 
     height:auto; 
     float: left; 
    } 

Answer 4

ändern white-space:nowrap-white-space:normal, hoffen, dass diese Sie

.chatbox { 
 
    border: 1px solid black; 
 
    border-radius: 3.5em/5em; 
 
    padding: 2%; 
 
    max-width: 60%; 
 
    float: left; 
 
    height: auto; 
 
    white-space: normal; 
 
}

<div class="chatbox"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet 
 
    facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet. 
 
</div>