如何影响折叠<span>线的启动？

Question

我有一个由三个<span>组成的文本，我不理解折叠它们时使用的规则：

​

<span style="font-family: sans-serif; 
font-weight: normal; 
color: black; 
background-color: white; 
border-color: darkblue; 
border-style: solid; 
border-width: 5px; 
padding: 3px 3px 3px 7px;
text-align: center;
">
    ℹ
</span>
<span style="
font-family: sans-serif; 
font-weight: bold;
color: white; 
background-color: darkblue;
border-color: darkblue;
border-style: solid;
border-width: 5px;
padding: 3px 3px 3px 3px;
">
    This is some text
</span>
<span style="font-family: sans-serif; 
font-weight: normal; 
color: black; 
background-color: white; 
border-color: darkblue; 
border-style: solid; 
border-width: 5px; 
padding: 3px 5px 3px 5px;
">
    This is more text, a longer one which will eventually fold. Some more words.
</span>

​

如果缩小了浏览器的宽度，则消息会折叠并重叠上面的部分。

是如何计算折叠的？(决定将文本放置在特定距离时考虑了什么？)

因此：，影响下一行文本底部移动的参数是什么？(换句话说:更改什么，以便第二行开始更低)

Answer 1

调整line-height。来自规格说明

内嵌框的垂直填充、边框和边距从内容区域的顶部和底部开始，与“行高”无关。，但在计算行框的高度时只使用“行高”。

​

span {
  font-family: sans-serif;
  border-color: darkblue;
  border-style: solid;
  border-width: 5px;
}

<span style=" font-weight: normal; 
color: black; 
background-color: white; 
padding: 3px 3px 3px 7px;
text-align: center;">
    ℹ
</span>
<span style="
font-weight: bold;
color: white; 
background-color: darkblue;
padding: 3px 3px 3px 3px;
">
    This is some text
</span>
<span style=" 
font-weight: normal; 
color: black; 
background-color: white; 
padding: 3px 5px 3px 5px;
line-height:35px;
">
    This is more text, a longer one which will eventually fold. Some more words.
</span>

​