단락의 텍스트 첫 줄만 들여 쓰기 하시겠습니까?

Question

필자는이 단락의 첫 번째 줄만 들여 쓰고 싶은 몇 개의 단락을 가지고 있습니다.

CSS 또는 HTML을 사용하여 첫 번째 줄만 타겟팅하는 방법은 무엇입니까?

Answer 1

text-indent 속성을 사용하십시오.

p { 
    text-indent: 30px; 
} 

jsFiddle.

Answer 2

매우 간단한 사용하여 CSS :

p { 
    text-indent:10px; 
} 

모든 단락에 10 개 픽셀의 들여 쓰기를 만듭니다.

Answer 3

추가 서식을 적용하려면 텍스트 들여 쓰기 외에 :first-line 선택기를 사용할 수 있습니다. 여기

p:first-line { 
    color:red; 
} 

p { 
    text-indent:40px; 
} 

http://jsfiddle.net/Madmartigan/d4aCA/1/

Answer 4

당신은 이동 :

이

p:first-line { 
    text-indent:30px; 
} 

는 CSS 초보자에 대한 명확한 답을하지 않았다, 그래서 여기에 쉬운 하나입니다.

Answer 5

동일한 문제가 발생하여 여러 개의 <p> 태그가 있습니다. "text-indent"속성을 사용하면 <p> 태그를 모두 들여 쓰고 싶었습니다.

견적의 맨 앞에 CSS 기반 배경 이미지가 있고 이미지 오른쪽에 텍스트가있는 추천 견적 이미지를 추가하고 싶습니다. text-indent이 첫 단락뿐 아니라 이후의 모든 단락 들여 쓰기를 유발했기 때문에 약간의 해결 방법을 취해야했습니다. 그래도 이미지를보고 싶지 않다면 같은 방법이 적용됩니다.

나는 들여 쓰기를 원하는 단락의 시작 부분에 빈 div를 먼저 추가하여이 작업을 수행했습니다. 다음으로 작은 너비와 높이를 적용하여 보이지 않는 상자를 만들고 마지막으로 왼쪽 플로트를 적용하여 텍스트와 인라인으로 흐리게 만듭니다. 이 이미지를 사용하는 경우 오른쪽 여백을 추가하거나 여백에 맞게 너비를 약간 넓게 만드십시오.

다음은 CSS 인라인의 예입니다. 당신은 쉽게 단지 클래스를 만들고 CSS 파일에 추가 할 수 있습니다 :

<div style="height: 25px; width: 25px; float: left;"></div> 
<p>First Paragraph</p> 
<p>Second Paragraph</p> 

Answer 6

첫 번째 들여 쓰기 모든 라인 (1) 첫 줄내어 쓰기보다 (2)

padding-left: 0.4em /* (1) */ 
text-indent: -0.4em /* (2) */ 

Answer 7

I도 있고 있었다

문단의 첫 줄 (첫 줄 만)을 들여 쓰고 문제가 발생하여 다음 코드를 시도했습니다.

p::first-line { text-indent: 30px; } 

이 방법은 작동하지 않았습니다.그래서, 난 내 CSS에서 클래스를 생성하고 다음과 같이 내 HTML에서 그것을 사용 :

CSS에서 :

.indent { text-indent: 30px; } 

HTML에서 :

<p class="indent"> paragraph text </p> 

이것은 마치 마법처럼 일했다. 나는 여전히 첫 번째 코드 예제가 작동하지 않는 이유를 모르며 텍스트가 정렬되지 않았는지 확인했습니다.