Question

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

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

这个工作的唯一方法是将文本放在一个段落中，这会导致那些可怕的难看的额外行。我宁愿把它们放在<span class="hang"></span>类型的东西中。

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

Answer 1

<span>是一个内联元素。除非你在谈论一个段落（通常意味着一个块元素），否则术语悬挂缩进是没有意义的。当然，您可以更改<p>或<div>或任何其他块元素的边距，以消除段落之间的额外垂直空间。

您可能想要display: run-in之类的内容，根据上下文，标记将成为块或内联...遗憾的是，这是not yet universally supported by browsers。

Answer 2

找到一种很酷的方法来做到这一点，减去讨厌的范围。

p {
  padding-left: 20px; 
} 

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

美好而简单：D

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

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

JSFiddle Example

Answer 3

ysth's answer is best with one debatable exception; the unit of measure should correspond to the size of the font.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3" would also work adequately well; "em" is not recommended as it is wider than the average character in an alphabetic set. "px" should only be used if you intended to align hangs of text blocks with differing font sizes.

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

3 个答案: