如何在跨度内的 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;
}

JSFiddle 示例

Answer 3

ysth 的答案是最好的，但有一个有争议的例外；测量单位应与字体大小相对应。

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

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