文本缩进对 div 的第一个子跨度元素有影响吗?

Text-indent has effect on the first child span element of div?

代码如下:https://jsfiddle.net/zz89emkr/1/

.menu-items {
  width: 400px;
  text-indent: 5%;
}    
<div class="menu-items">
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus quia maiores voluptatum adipisci iusto perferendis earum quasi, accusamus magni temporibus alias consectetur, provident vel quis nesciunt expedita sit nemo aliquam?</span>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo quas esse eius. Quos atque ea necessitatibus labore est error hic. At quae veritatis sit aperiam debitis animi provident dolorum dolore?</div>
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, eaque atque adipisci, fugiat fuga maiores repellendus voluptas non explicabo odio et ut tenetur sint iusto minima unde. Ex, voluptas sed?</span>
</div>

我知道文本缩进不适用于内联元素,但是,在此示例中,第一个跨度将获得文本缩进。此外,在 firefox 中,第一个 span 元素中的文本缩进比 div 元素中的文本缩进更大。

display:block 交给 .menu-items span 因为 span 默认行为是 inline-block.

.menu-items {
  width: 400px;
  text-indent: 5%;
}
.menu-items span{
  display:block;
}
<div class="menu-items">
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus quia maiores voluptatum adipisci iusto perferendis earum quasi, accusamus magni temporibus alias consectetur, provident vel quis nesciunt expedita sit nemo aliquam?</span>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo quas esse eius. Quos atque ea necessitatibus labore est error hic. At quae veritatis sit aperiam debitis animi provident dolorum dolore?</div>
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, eaque atque adipisci, fugiat fuga maiores repellendus voluptas non explicabo odio et ut tenetur sint iusto minima unde. Ex, voluptas sed?</span>
  </div>

Text-indent has effect on the first child span

不,实际上缩进与span无关。由于您已在块元素上设置 text-indent - .menu-items - 缩进将在之前应用:

1) 容器中的第一个 element/node - 无论该元素是 inline 还是 block 或者该元素是文本还是其他内容(例如图像)和...

2) 容器中的所有后续块级文本元素 (*)(见下文)

.wpr {
  text-indent: 5%;
}
<div class="wpr">
  This is just a regular text node. However, since it's the <strong>first node</strong> in the container - it is indented (due to text-indent being set on the wrapper div)
  <p>This is some block level text - it's indented</p>
  <span>Here is some inline level text</span>
  <div>Here's some more block level text - again, indented</div>
  This text node is <strong>not indented</strong>
</div>
<hr>
<div class="wpr">
  <img src="http://via.placeholder.com/350x150" alt=""> 
  <p>Notice that the image above is indented (it's the first element in the container) This block level text - so it's also indented</p>
  <span>Here is some inline level text</span>
  <div>Here's some more block level text - again, indented</div>
  This text node is <strong>not indented</strong>
</div>

What's more, in firefox, the text-indent in the first span element is larger than that in the div element

首先,firefox 上的这种差异只能在以下情况下重现:

1) 容器元素有设定宽度(小于视口宽度)

2) text-indent 设置了 百分比

3)容器中第一个元素不是块级

(所有 3 个条件都出现在您提供的示例 fiddle 中)

这看起来像 一个错误,因为 firefox 将缩进(在第一个元素之前)呈现为 视口宽度而不是容器宽度的百分比!

Codepen Demo(在 firefox 中调整大小以查看 - 并注意第一行的缩进)

因为 The spec 明确指出(我的粗体):

Percentages: refers to width of containing block

...我会说 firefox 做错了。


(*) 这是我对spec中所说内容的理解:

Unless otherwise specified by the each-line and/or hanging keywords, only lines that are the first formatted line [CSS21] of an element are affected. For example, the first line of an anonymous block box is only affected if it is the first child of its parent element.

The spec elsewhere详解"first formatted line"的含义:

The "first formatted line" of an element may occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not positioned and not a float). E.g., the first line of the DIV in <DIV><P>This line...</P></DIV> is the first line of the P (assuming that both P and DIV are block-level).