<span> 들여 쓰기 래핑 된 텍스트

그래서 내부에 div와 몇 개의 스팬이있는 테이블 레이아웃을 시뮬레이트하고 있습니다. 오른쪽의 스팬을 감싸는 텍스트를 들여 쓰기하고 싶습니다. 저는 몇 가지 시도를 해봤지만 제대로 작동하지 않습니다. 어떤 도움을 주시면 감사하겠습니다.<span> 들여 쓰기 래핑 된 텍스트

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;}

출처

2011-10-03 Scott Beeson

'display : table-cell'을 사용하지 않는 이유는 무엇입니까? – sdleihssirhc

음, 천재 ... 전에는 그걸 사용 해본 적이 없지만 왜 그런지 모르겠습니다. 대답 해주세요. 당신에게 점수를 줄 수 있어요. –

아, 이제는 100 % 너비로 만들 수 없지만 ... 계속 노력하고 있습니다. –

에 체크를 아웃 : 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>

출처

2011-10-03 18:20:17 simshaun

이 문제는 (둘 다 인라인 블록을 만든다) 첫 번째 줄을 다음 줄에 놓는다. 두 번째 줄의 너비를 제거하면 무슨 뜻인지 알게 될 것이다. 너비 300 픽셀 이하의 창). –

'.display-field'에 고정 너비를 지정하지 않은 경우 span 요소이므로 inline에서 inline-block으로 전환해야합니다. 비 크로스 브라우저를 사용하여 테이블 셀을 에뮬레이션해야합니다 - 호환 디스플레이 : table-cell'. 또는, 이것이 실제 테이블을 사용하는 방식입니다. – simshaun

들여 쓰기가 들리는 것처럼 들립니다. 이 같은 CSS 뭔가 트릭 수행해야합니다

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

을하지만 당신의 <span> 인라인 요소, 텍스트 들여 쓰기 특성뿐만 아니라 블록에 관련된 다른 CSS 속성이기 때문에 의미가 없다.

출처

2011-10-03 18:28:25

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의 경우

출처

2015-04-21 05:55:43

<span> 들여 쓰기 래핑 된 텍스트

답변

관련 문제