設置div最大寬度，但div不會自動擴展高度

我有一個div已被設置爲最大寬度。我在div中輸入不同的內容，我發現一些輸入（emoji）會讓div擴展它的高度，但是如果我輸入所有英文chatacters，div不會自動擴展它的高度。設置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。

來源

2016-12-01 iofcehealth

的文本不換，因爲它是一個連續的線，如果這是您希望如何輸出文本然後將此CSS樣式添加到包含元素中：

word-wrap: break-word;

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

來源

2016-12-01 09:39:01 efreeman

如果在段落中的文本不會打破之間沒有空格，請與片段

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

來源

2016-12-01 09:38:54

添加此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>

文字事業部

來源

2016-12-01 09:42:43 cna327

設置div最大寬度，但div不會自動擴展高度

回答

相關問題