设置div max-width但div不会自动扩展高度

Question

我有一个已设置最大宽度的div。 我在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。

Answer 1

文本没有换行，因为它是一个连续的行，如果您希望输出文本的方式，则将此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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;