<span> indent sarılmış metin

Question

Bu yüzden bir div ve bir çift açıklık içeren bir tablo düzenini simüle ediyorum. Sarılmış herhangi bir metni girintileme hakkını kullanmak istiyorum. Birkaç şey denedim ve işe yaramayacağım. Herhangi bir yardım takdir edilecektir.

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

Kontrol şuna: 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

Asılı bir girinti olmasını istediğiniz gibi geliyor. Böyle CSS şey hile yapmak gerekir:

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

Ama <span> bir satır içi elemanı, metin girinti özelliği yanı sıra bir bloğa ilişkin diğer CSS özelliklerini olduğundan, anlamsızdır.

Answer 3

CSS 3 draft specifies a hanging indent. Tarayıcılar tarafından destekleniyorsa, aşağıdaki çalışması gerekir: CSS Text Module Level 3 için şartname hala Taslak olarak

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

Maalesef ne hanging ne de each-line değerleri currently supported in modern browsers bulunmaktadır. Özellik, WebKit ve Chromium için tarayıcıya özel bir önek ile uygulanır. Firefox there is an open Bug you may vote on için.