如何影响折叠 <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。来自specification：

内联非替换框的垂直内边距、边框和边距 从内容区的顶部和底部开始，和无关 与“线高”。 但在时只使用'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>