1

这里的问题是，当我<span>在一个标签中有多个元素<p>并给它们<span>一个 CSS 时inline-block，末尾的空间<span>被inline-block.

有人可以解释为什么会发生这种行为吗？

.container {
  width: 500px;
  margin: auto;
  font-size: 2em;
  border: solid 1px red;
}

.merge {
  white-space: nowrap;
  display: inline-block;
}
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur <span class="merge">adipisicing elit, </span><span class="merge">Provident, </span><span class="merge">amet, </span><span class="merge">facere, </span><span class="merge">modi itaque, </span><span class="merge">praesentium, </span><span class="merge">nihil quam? </span><span class="merge">Nostrum, </span><span class="merge">aut assumenda, </span><span class="merge">Doloribus vitae, </span><span class="merge">necessitatibus, </span><span class="merge">iusto, </span><span class="merge">debitis, </span><span class="merge">aliquam, </span><span class="merge">odit, </span><span class="merge">pariatur, </span><span class="merge">fuga, </span><span class="merge">mollitia, </span><span class="merge">magni, </span></p>
</div>

4

2 回答 2

3

在每个 inline-block 中，前导和尾随空格被视为无关紧要并且不呈现，遵循与CSS2 的第 16.6.1 节中的常规块元素相同的规则。这是因为内联块和常规块一样，是块容器盒，每个都建立自己的内联格式化上下文。

具体来说，适用于“每一行”的以下步骤实际上适用于每个内联块，因为它包含自己的“文本行”。内部文本并不都与内联块本身占用相同的行框，而是由内联块控制的内联格式化上下文。

随着每一行的布局，

  1. 如果行首的空格 (U+0020) 将“white-space”设置为“normal”、“nowrap”或“pre-line”，则会将其删除。

  2. [...]

  3. 如果行尾的空格 (U+0020) 将 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，它也会被删除。

这与默认值不同，默认值display: inline会导致所有文本都呈现在同一个行框中。因此，默认跨度中的任何空格都不会被修剪，除非它们位于一行的开头或结尾。

于 2019-09-03T07:05:31.730 回答
0

您可以在 span 元素中添加额外的填充来解决此问题。

例子：

.merge {
  white-space: nowrap;
  display: inline-block;
  padding: 0 5px;
}

于 2019-09-03T07:08:21.570 回答