CSS <span> 缩进换行文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7638970/
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
<span> indent wrapped text
提问by Devil's Advocate
So I'm simulating a table layout with a div and a couple spans inside it. I'd like the span on the right to indent any text that wraps. I've tried a few things and can't get it to work. Any help would be appreciated.
所以我正在模拟一个带有 div 和几个跨度的表格布局。我希望右边的跨度可以缩进任何换行的文本。我已经尝试了一些东西，但无法让它工作。任何帮助，将不胜感激。
jsFiddle: http://jsfiddle.net/2Wbuv/
jsFiddle：http: //jsfiddle.net/2Wbuv/
HTML
HTML
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>
CSS
CSS
.display-element {}
.display-label {display: inline-block;
width: 100px;
padding-left: 5px;}
.display-field {display: inline;}
回答by simshaun
Check this out: http://jsfiddle.net/2Wbuv/2/
看看这个：http: //jsfiddle.net/2Wbuv/2/
.display-element {
}
.display-label {
display: inline-block;
width: 100px;
padding-left: 5px;
}
.display-field {
display: inline-block;
padding-left: 50px;
text-indent: -50px;
vertical-align: top;
width: 200px; /* for testing purposes only */
}<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>回答by Nicholas Carey
It sounds like you want a hanging indent. CSS something like this should do the trick:
听起来你想要一个悬挂的缩进。像这样的 CSS 应该可以解决问题：
.hanging-indent
{
text-indent : -3em ;
margin-left : 3em ;
}
But since your <span>is an inline element, the text-indent property, as well as other CSS properties pertaining to a block, is meaningless.
但是由于您<span>是一个内联元素，因此 text-indent 属性以及与块有关的其他 CSS 属性是没有意义的。
回答by Florian Feldhaus
The CSS 3 draft specifies a hanging indent. If supported by Browsers, the following should work:
在CSS 3草案规定悬挂缩进。如果浏览器支持，以下应该可以工作：
.hanging-indent
{
text-indent: 3em hanging each-line;
}
Unfortunately neither hangingnor each-linevalues are currently supported in modern browsersas the specification for CSS Text Module Level 3is still a Draft.
不幸的是，现代浏览器目前既不支持hanging也不支持each-line值，因为CSS 文本模块级别 3的规范仍然是草案。
The feature is implemented with a browser specific prefix for WebKitand Chromium. For Firefox there is an open Bug you may vote on.
该功能是使用WebKit和Chromium的浏览器特定前缀实现的。对于Firefox，您可以对一个未解决的 Bug 进行投票。
