div max-widthを設定しますが、divは自動的に高さを拡大しません

Question

divには最大幅が設定されています。 私はdivに異なる内容を入力しましたが、入力（emoji）によってdivの高さが拡大されることがわかりましたが、すべての英語のチャ​​ットを入力するとdivは自動的にその高さを拡大しません。

は、以下のHTMLコードです：

<div style="float: left;color: #fff;background-color: #00b0ff; max-width:300px;">   
    howdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspace 
</div> 

<div style="float: left;color: #fff;background-color: #00b0ff; max-width:300px;"> 
    
</div> 

そして私はresultを添付しています。

Answer 1

に確認してくださいあなたのテキストがどのように出力されるのかを考えて、このCSSスタイルを含む要素にこのCSSスタイルを追加してください：

word-wrap: break-word; 

jsfiddle例： https://jsfiddle.net/6nv9ohfw/1/

Answer 2

テキストは中断されません段落の間にスペースがない場合は、これがあれば、それは一つの連続ラインですので、テキストはラップされていないスニペット

<div style="float: left;color: #fff;background-color: #00b0ff; max-width:300px;">   
 
    howdoyoudoaspa cehowdoyoudoaspacehowdoyoud oaspacehowdoyoudoaspac ehowdoyoudoaspaceho wdoyoudoaspace 
 
</div> 
 

 
<div style="float: left;color: #fff;background-color: #00b0ff; max-width:300px;"> 
 
     
 
</div>

Answer 3

はこのword-wrap: break-word;またはword-break: break-allはCSS

<div style="float: left;color: #fff;background-color: #00b0ff; max-width:300px;/*word-break: break-all;*/word-wrap: break-word;">   
 
    howdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspacehowdoyoudoaspace 
 
</div> 
 

 
<div style="float: left;color: #fff;background-color: #00b0ff; max-width:300px;"> 
 
    
 
</div>

でディビジョンテキストに追加します