html - 设置 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 样式添加到包含元素:

 word-wrap: break-word;

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