CSS의 첫 줄 대체 텍스트 들여 쓰기?

Internet Explorer의 Active-X 플러그인으로 페이지를 인쇄 할 때 <p> 텍스트 들여 쓰기 속성이 렌더링되는 방식에 문제가 있습니다. 여기에 관련 CSS는 다음과 같습니다CSS의 첫 줄 대체 텍스트 들여 쓰기?

p { 
font-family: Calibri; 
font-size: 20pt; 
line-height: 1.75em; 
margin-bottom: 1.00em; 
margin-top: 1.00em; 
margin-left:1.0em; 
margin-right:1.0em; 
text-indent:1.5em; 
}

당신은 무엇을 위의 코드를 사용하여 HTML 페이지, 인쇄 할 때 무슨 일이 일어나고 볼 수 아래 :

Improper rendering

모든 새 페이지의 상단이있다 텍스트 들여 쓰기 적용! 모든 <p> "단락 태그"의 첫 번째 줄을 "text-indent"속성을 사용하지 않고 들여 쓰기 할 수있는 대체 방법이 있습니까? 솔루션은 브라우저와 독립적이어야합니다.

출처

2013-07-07 user1527613

무엇 ::first-letter 의사 요소를 사용하는 방법에 대해?

p:first-letter { 
    padding-left: 30px; 
}

JsFiddle Demo

Chrome Safari Firefox Opera IE  Android iOS 
1+  1+  1+   3.5+  5.5+ All  All

출처

2013-07-07 21:07:16

당신은 텍스트 들여 쓰기의 효과를 모방하기 위해 pseudo elements를 사용할 수

p:before 
{ 
    content: '\00A0 \00A0 \00A0 \00A0 \00A0 \00A0 \00A0'; 
    dispay:inline-block; 
}

FIDDLE

편집 :

하면 (아래 질문자의 의견으로 당) 위의 CSS 솔루션이 작동하지 않습니다. 그런 다음 m aybe 대신 CSS를 사용하면

각 단락 요소 다음에 고정 된 수의 줄 바꿈하지 않는 공백을 추가 할 수 있습니다. 그래서 당신은 단순히 복사하여이 작업을 수행 할 수 <p>         ...

FIDDLE

처럼

/교체 :

<p> -> <p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ...

출처

2013-07-07 12:20:06 Danield

좋은 솔루션, +1, 그냥 브라우저 지원의 경우, 내가 IE 여기에 게임 스포일러 –

될 것이라고 말씀하고 싶은 브라우저 지원 IE9 이전의 IE 버전은 유사 요소를 지원하지 않으며 Android도 지원하지 않습니다. 따라서 Daneild의 솔루션은 나를위한 실행 가능한 솔루션이 아닙니다. – user1527613

@ user1527613 - 사실이 아닙니다. IE8은 모든 버전의 안드로이드를 지원합니다. http://caniuse.com/#search=pseudo – Danield

CSS의 첫 줄 대체 텍스트 들여 쓰기?

답변

관련 문제