2008-08-15 2 views
28

유일한 발견은 다음과 같습니다.범위 내 CSS에서 브라우저 호환 가능한 모든 들여 쓰기 들여 쓰기 스타일을 만드는 방법

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

이 방법을 사용하는 유일한 방법은 끔찍한보기 흉한 여분의 줄을 만드는 단락에 텍스트를 넣는 것입니다. 차라리 그냥 <span class="hang"></span> 종류의 것을 가지고 주시면 좋을 것입니다.

나는 또한 한 단계의 교수형보다 더 들여 쓰는 방법을 찾고 있습니다. 단락을 사용하여 들여 쓰기를 작동하지 않습니다.

답변

16

<span>은 인라인 요소입니다. 단락 (일반적으로 블록 요소를 의미)에 대해 언급하지 않는 한 들여 쓰기 들여 쓰기은 의미가 없습니다. 물론 <p> 또는 <div> 또는 다른 블록 요소에서 여백을 변경하여 단락 사이에 추가 수직 간격을 제거 할 수 있습니다.

문맥에 따라 태그가 블록 또는 인라인이되는 display: run-in과 같은 것을 원할 수도 있습니다 ... 슬프게도이 태그는 not yet universally supported by browsers입니다.

+0

simples 접근법은 span에 기본적으로 동일하지만 인라인 텍스트 대신 블록 요소로 div에'.hang' CSS를 사용하는 것입니다. 선택적으로'display : block;'을'.hang' 정의에 포함 할 수 있습니다. 그러나 다시 span을 사용하면 div를 사용하는 것과 같을 것입니다 ... – awe

7

멋진 방법을 찾아 냈습니다.

p { 
    padding-left: 20px; 
} 

p:first-letter { 
    margin-left: -20px; 
} 

니스와 간단한 다음 줄 바꿈이 p 개의 블록에서 당신을 귀찮게하는 경우 D

, 당신은

p { 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

JSFiddle Example

+0

"first-child"를 의미한다고 생각합니다 –

+0

나는 ' 그것이 ": 첫 아이"가 될 것이라고 생각하지 않습니다. 확실하지 않은 경우 : "첫 글자"중 하나가 완료됩니다. 그것은 내 테스트에서 작동하지 않았다. jsfiddle를 제공 ​​할 수 있습니까? –

+0

[첫 번째 글자]와 함께 여백 속성을 사용할 수 있다고 [link] (http://www.w3schools.com/cssref/sel_firstletter.asp) – gavsiu

3

ysth의 대답은 하나 개의 논쟁의 여지를 제외하고 가장 적합한 추가 할 수 있습니다; 측정 단위는 글꼴의 크기와 일치해야합니다.

p { 
    text-indent: -2en; 
    padding-left: 2en; 
} 

"3"도 적절하게 작동합니다. "em"은 영문자 세트의 평균 문자보다 넓기 때문에 권장하지 않습니다. "px"는 다른 글꼴 크기로 텍스트 블록을 정렬하려는 경우에만 사용해야합니다.

+0

크롬에서 테스트되었으므로 _en_을 좋아하지 않습니다. Googling _en vs em_은 대시 특정 문자 너비로 나타나지만 아무 것도 공백 문자로 사용할 수 없다고합니다. – agweber