Question

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

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 draft specifies a hanging indent。如果浏览器支持，则以下内容应该有效：

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

不幸的是hanging和each-line值都不是currently supported in modern browsers，因为CSS Text Module Level 3的规范仍然是草稿。

该功能使用WebKit和Chromium的浏览器特定前缀实现。对于Firefox there is an open Bug you may vote on。

<span>缩进包装文字</span>

3 个答案: