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：

内嵌的非替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与无关与“线高”。 但在以下情况下仅使用“行高” 计算行框的高度。

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>

如何影响<span>折线的开始？

1 个答案: