<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>は、インライン要素、テキストインデントプロパティだけでなく、ブロックに関連する他のCSSプロパティであるため、無意味です。

Answer 3

CSS 3 draft specifies a hanging indent。ブラウザでサポートされている場合は、以下の作業をする必要があります：CSS Text Module Level 3の仕様は、まだドラフトであるよう

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

は、残念ながらどちらもhangingもeach-line値がcurrently supported in modern browsersです。

この機能は、WebKitとChromiumのブラウザ固有のプレフィックスで実装されています。 Firefox there is an open Bug you may vote onの場合。