设置div最大宽度，但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>

我还附上了结果。

Answer 1

文本没有包装，因为它是连续的一行，如果您希望文本能够输出，那么将这个CSS样式添加到包含的元素中：

 word-wrap: break-word;

弹琴示例：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>

​