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

Question

我唯一发现的是；

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

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

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

Answer 1

<span>是一个内联元素。除非您在谈论段落（通常表示块元素），否则术语悬挂缩进是没有意义的。当然，您可以更改<p>or<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;
}

JSFiddle 示例

Answer 3

ysth 的答案最好有一个有争议的例外；度量单位应对应于字体的大小。

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

“3”也可以很好地工作；不推荐使用“em”，因为它比字母集中的平均字符宽。仅当您打算对齐具有不同字体大小的文本块的挂起时，才应使用“px”。