<span>缩进包装文本

Question

所以我正在模拟一个表格布局,里面有div和几个跨度.我希望右边的跨度缩进任何包装的文本.我尝试了一些东西,却无法让它发挥作用.任何帮助,将不胜感激.

jsFiddle:http://jsfiddle.net/2Wbuv/

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

.display-element        {}

.display-label          {display: inline-block;
                         width: 100px;
                         padding-left: 5px;}

.display-field          {display: inline;}

Answer 1

看看这个: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>

Answer 2

听起来你想要一个悬挂的缩进.像这样的CSS应该可以解决这个问题:

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

但由于你<span>是一个内联元素,text-indent属性以及与块有关的其他CSS属性是没有意义的.

Answer 3

在CSS 3草案规定悬挂缩进。如果浏览器支持，以下应该可以工作：

.hanging-indent
{
  text-indent: 3em hanging each-line;
}

不幸的是，现代浏览器目前既不支持hanging也不支持each-line值，因为CSS 文本模块级别 3的规范仍然是草案。

该功能是使用WebKit和Chromium的浏览器特定前缀实现的。对于Firefox，您可以对一个未解决的 Bug 进行投票。