Html 如何在包裹成多行的跨度中对齐缩进线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4677976/
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 align an indented line in a span that wraps into multiple lines?
提问by Upvote
Does anyone have an idea how to align the second line?
有谁知道如何对齐第二行？
span.info {
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight: bold;
}<span class="info"></span>回答by choise
display:block;
then you've got a block element and the margin is added to all lines.
那么你有一个块元素，边距被添加到所有行。
While it's true that a span is semantically not a block element, there are cases where you don't have control of the pages DOM. This answer is inteded for those.
虽然 span 在语义上不是块元素，但在某些情况下，您无法控制页面 DOM。这个答案是为那些人准备的。
回答by poke
<span>elementsare inline elements, as such layout properties such as widthor margindon't work. You can fix that by either changing the <span>to a block element (such as <div>), or by using padding instead.
<span>元素是内联元素，例如width或margin不工作这样的布局属性。您可以通过将 更改<span>为块元素（例如<div>）或使用填充来解决此问题。
Note that making a spanelement a block element by adding display: block;is redundant, as a spanis by definition a otherwise style-less inline element whereas divis an otherwise style-less block element. So the correct solution is to use a divinstead of a block-span.
请注意，span通过添加使元素成为块元素display: block;是多余的，因为 aspan根据定义是一个没有样式的内联元素，而div在其他方面是一个没有样式的块元素。所以正确的解决方案是使用 adiv而不是 block- span。
回答by Shikiryu
spanis a inline element which means if you use <br/>it'll b considered as one line anyway.
span是一个内联元素，这意味着如果您使用<br/>它，无论如何都会被视为一行。
Change spanto a block element or add display:blockto your class.
更改span为块元素或添加display:block到您的类。
回答by Mohammad Badiuzzaman
<!DOCTYPE html>
<html>
<body>
<span style="white-space:pre-wrap;">
Line no one
Line no two
And many more line.
This is Manik
End of Line
</span>
</body>
</html>
回答by oezi
try to add display: block;(or replace the <span>by a <div>) (note that this could cause other problems becuase a <span>is inline by default - but you havn't posted the rest of your html)
尝试添加display: block;（或替换为<span>a <div>）（请注意，这可能会导致其他问题，因为<span>默认情况下a是内联的 - 但您还没有发布其余的 html）
回答by Daniel Nyamasyo
Also you can try to use
你也可以尝试使用
display:inline-block;
if you would like the span element to align horizontally.
如果您希望 span 元素水平对齐。
Incase you would like to align span elements vertically, just use
如果您想垂直对齐跨度元素，只需使用
display:block;
回答by tzot
You want multiple lines of text indented on the left. Try the following:
您希望在左侧缩进多行文本。请尝试以下操作：
CSS:
CSS：
div.info {
margin-left: 10px;
}
span.info {
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight:bold;
}
HTML:
HTML：
<div class="info"><span class="info">blah blah <br/> blah blah</span></div>
