如何在跨度中的CSS中创建与浏览器兼容的所有悬挂缩进样式

Question

我发现的唯一一件事就是;

.hang {
    text-indent: -3em;
    margin-left: 3em;
}

这种方法的唯一方法是将文本放入段落中,这会导致那些可怕的难看的额外行.我宁愿把它们放在某种<span class="hang"></span>东西中.

我也在寻找一种进一步缩进的方法,而不仅仅是单级悬挂.使用段落来堆叠缩进不起作用.

Answer 1

<span>是一个内联元素.除非你在谈论一个段落(通常意味着一个块元素),否则术语悬挂缩进是没有意义的.你可以,当然,更改页边距<p>或<div>或任何其他块元素得到段落之间摆脱额外的垂直空间.

你可能需要这样的东西display: run-in,根据上下文,标签将变成块或内联......遗憾的是,浏览器尚未普遍支持这一点.

Answer 2

找到了一个很酷的方法来做到这一点,减去令人讨厌的跨度.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

好又简单:D

如果新行在p块中困扰你,你可以添加

p {
  margin-top: 0px;
  margin-bottom: 0px;
}