内部のテキストの長さに基づいてボックスの高さが異なる

Question

ボックス内のさまざまな長さのテキストの内容を折り返したいと思います。以下のコードでは、長さの短いテキストに対してボックスの幅が調整されます。しかし、高さは変化せず、テキストはボックス内にラップされません。

.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

あなたが問題を作成height:autoとword-wrapを、必要としないこの

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

を試してみてください。私は、paddingをborder-radiusと互換性があるように変更しました。 nowrap`：white-space:normalへ

Answer 2

だけCSS以下であなたのCSSを置き換える：

.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

ただ、それがこのように動作するwhite-space: nowrapを削除します。

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

Answer 4

変更white-space:nowrapが、これはあなたが

.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>