플로팅 후 공백을 유지하는 방법 : 첫 번째 문자 바로 뒤에 공백이 오는 경우 첫 문자?

Question

첫 번째 단어가 단일 문자 인 경우 드롭 자본 및 두 번째 문자 사이에 공백을 넣을 수있는 우아한 솔루션 (즉,  을 텍스트에 추가하지 않음)은 무엇입니까?

단락의 첫 글자에 대문자를 추가하려고합니다. 내가 마주 치게되는 문제는 첫 번째 단어가 과 같이 1 문자 단어 인 지 혼란스러워 보이기 때문에 공간이 사라지는 것입니다.

예는 아래와 같다 :

p::first-letter { 
 
    font-size: 150%; 
 
    float: left; 
 
}

<p>Some text.</p> 
 

 
<p> 
 
    I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. 
 
</p>

용액을 float: left가하는 것과 동일한 방식으로 라인 사이의 라인 높이를 동일하게 유지한다.

Answer 1

다음 해결책은 첫 번째 문자 다음에 공백을 보존합니다.

p { 
 
    white-space: pre-wrap; 
 
} 
 

 
p::first-letter { 
 
    font-size: 150%; 
 
    float: left; 
 
}

<p>Some text.</p> 
 

 
<p>I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text.</p>

NB이 그것을하지 않도록 한 라인과 라인의 나머지 부분에 대한 정확한 될 수있는 공백에서 포맷 할 p에 내부 HTML을 필요로 공백의 나머지 부분을 방해하십시오.

Answer 2

이것은 약간 까다롭지 만 CSS를 변경해야합니다. 당신이 vertical-align로 교체 그래서 만약

p::first-letter { 
    font-size: 150%; 
    vertical-align: text-top; 
} 

float: left; 속성 대신,이 공간을 유지하고 원하는 효과를 달성하기 위해 상단에 텍스트를 정렬 간격을 제거했다. 여기

편집

작동을 보여 an example JSFiddle입니다.