2

这是代码：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>

我知道 text-indent 不适用于 inline 元素，但是，在此示例中，第一个 span 将获得 text-indent。更重要的是，在 Firefox 中，第一个 span 元素中的 text-indent 比 div 元素中的大。

4

2 回答 2

2

文本缩进对第一个子跨度有影响

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

1) 容器中的第一个元素/节点 - 无论该元素是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>

更重要的是，在firefox中，第一个span元素中的text-indent比div元素中的大

首先，Firefox 上的这种差异只能在以下情况下重现：

1）容器元素有一个设定的宽度（小于视口宽度）

2)text-indent用百分比值设置

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

（所有 3 个标准都存在于您提供的示例小提琴中）

这看起来像一个错误，因为Firefox将缩进（在第一个元素之前）呈现为视口宽度的百分比值而不是容器宽度的百分比！

Codepen 演示（在 Firefox 中调整大小以查看此内容 - 并注意第一行的缩进）

由于规范明确指出（我的粗体）：

百分比：指包含块的宽度

...我会说 Firefox 做错了。

(*) 这是我对规范中所说的内容的理解：

除非每行和/或悬挂关键字另有规定，否则只有元素的第一个格式化行[CSS21] 的行会受到影响。例如，匿名块框的第一行只有在它是其父元素的第一个子元素时才会受到影响。

其他地方的规范详细说明了“第一个格式化行”的含义：

元素的“第一个格式化行”可能出现在同一流中的块级后代内部（即，未定位且不是浮点数的块级后代）。例如，DIV in<DIV><P>This line...</P></DIV>的第一行是 P 的第一行（假设 P 和 DIV 都是块级的）。

于 2017-11-14T06:55:45.103 回答
0

给予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>

于 2017-11-14T06:06:51.483 回答