如果<span>内部有多行文本，则内联块获得父项的 100% 宽度

Question

内联块<span>如果里面有多行文本，则获得父级的 100% 宽度。为什么第一个跨度获取其内容的宽度，但第二个跨度获取父项的宽度？

h1{text-align:center;}
span{border:1px solid #000; display:inline-block;}
<div style="width:500px;">
    <h1><span>aaaaaaaa</span></h1>
    <h1><span>aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa</span></h1>
</div>

https://jsfiddle.net/6wpLvb5x/

Answer 1

它没有添加额外的填充，它只是在内容超过提到的div 宽度时解决对齐问题 500px，要解决此问题，要么使div 像宽度一样流畅到 100% 或添加 css 属性 word-break： break-all 到span，因为 DOM 将根据内容大小呈现;

h1{text-align:center;}
span{border:1px solid #000; display:inline-block;}

<div style="width:100%">
<h1><span> aaaaaaaa aaaaaaaa </span></h1>
<h1><span>aaaaaaaa gawgwe gsadgd gasdgds asffasdf gweg gwege</span></h1>
</div>