<span> văn bản được thụt lề indent

Question

Vì vậy, tôi đang mô phỏng bố cục bảng với một div và một vài nhịp bên trong nó. Tôi muốn khoảng trống ở bên phải thụt lề bất kỳ văn bản nào kết thúc tốt đẹp. Tôi đã thử một vài thứ và không thể làm cho nó hoạt động được. Bất kỳ trợ giúp sẽ được đánh giá cao.

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

Kiểm tra này ra: 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

Có vẻ như bạn muốn thụt lề treo. CSS một cái gì đó như thế này nên làm như lừa:

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

Nhưng kể từ <span> của bạn là một yếu tố nội tuyến, tài sản text-indent, cũng như các thuộc tính CSS khác liên quan đến một khối, là vô nghĩa.

Answer 3

CSS 3 draft specifies a hanging indent. Nếu được hỗ trợ bởi trình duyệt, sau đây nên làm việc:

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

Đáng tiếc là không phải hanging cũng không each-line giá trị là currently supported in modern browsers như thông số kỹ thuật cho CSS Text Module Level 3 vẫn là một dự thảo.

Tính năng được triển khai với tiền tố cụ thể của trình duyệt cho WebKit và Chromium. Đối với Firefox there is an open Bug you may vote on.