<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

The 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。