Html 如何在跨度内在 CSS 中创建所有浏览器兼容的悬挂缩进样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create an all browser-compatible hanging indent style in CSS in a span
提问by agweber
The only thing I've found has been;
我唯一发现的是；
.hang {
text-indent: -3em;
margin-left: 3em;
}
The only way for this to work is putting text in a paragraph, which causes those horribly unsightly extra lines. I'd much rather just have them in a <span class="hang"></span>type of thing.
唯一可行的方法是将文本放在一个段落中，这会导致那些非常难看的额外行。我更愿意将它们放在某种<span class="hang"></span>东西中。
I'm also looking for a way to further indent than just a single-level of hanging. Using paragraphs to stack the indentions doesn't work.
我也在寻找一种方法来进一步缩进，而不仅仅是单级悬挂。使用段落堆叠缩进不起作用。
采纳答案by Shog9
<span>is an inline element. The term hanging indentis meaningless unless you're talking about a paragraph (which generally means a block element). You can, of course, change the margins on <p>or <div>or any other block element to get rid of extra vertical space between paragraphs.
<span>是一个内联元素。除非您谈论的是段落（通常表示块元素），否则术语悬挂缩进是没有意义的。你可以，当然，更改页边距<p>或<div>或任何其他块元素得到段落之间摆脱额外的垂直空间。
You may want something like display: run-in, where the tag will become either block or inline depending on context... sadly, this is not yet universally supported by browsers.
您可能想要类似的东西display: run-in，其中标签将根据上下文变为块或内联……遗憾的是，浏览器尚未普遍支持。
回答by David Barnett
Found a cool way to do just that, minus the nasty span.
找到了一种很酷的方法来做到这一点，减去令人讨厌的跨度。
p {
padding-left: 20px;
}
p:first-letter {
margin-left: -20px;
}
Nice and simple :D
漂亮而简单：D
If the newlines are bothering you in p blocks, you can add
如果换行符在 p 块中打扰您，您可以添加
p {
margin-top: 0px;
margin-bottom: 0px;
}
回答by JCH2
ysth's answer is best with one debatable exception; the unit of measure should correspond to the size of the font.
ysth 的答案是最好的，但有一个有争议的例外；度量单位应与字体大小相对应。
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.
“3”也可以很好地工作；不建议使用“em”，因为它比字母集中的平均字符宽。仅当您打算对齐具有不同字体大小的文本块挂起时，才应使用“px”。
