첫 글자 선택 CSS

enter image description here

은 오른쪽에있는 텍스트는 내가 달성하기 위해 필요한, 왼쪽에있는 텍스트 내가 뭘 찾았는지입니다.

아무도 이것에 대한 좋은 해결책을 알고 있습니까? 지금까지 CSS 만 시도했지만 아무 것도 시도하지 않습니다.

.single-post .spb_text_column p:first-child::first-letter{ 
font-size: 200%; 
font-weight: bold; 
vertical-align: -14px; 
}

내가 편지를 떠 수 있으며, 그 텍스트의 공간이 사라 여전히 텍스트가 많은 편지를 둘러싸하지 않습니다 수 있습니다 -

지금까지 내 CSS입니다. 누구든지 이것에 대한 해결책을 가지고 있다면 ... 자바 스크립트, CSS 또는 심지어 Wordpress 플러그인도 괜찮을 것입니다. 감사.

출처

2015-01-08 Sean Anderson

나는 또한 게시물에 대한 레이아웃을 편집하는 Wordpress를 사용하고 있다고 언급해야합니다. 아마도 첫 번째 문자에 span 태그를 추가 할 수있는 방법이 있습니까? –

이 시도 :

p:first-child:first-letter { 
 
    float: left; 
 
    color: #903; 
 
    font-size: 75px; 
 
    line-height: 60px; 
 
    padding-top: 4px; 
 
    padding-right: 8px; 
 
    padding-left: 3px; 
 
    font-family: Georgia; 
 
}

<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu. 
 
</p>

출처

2015-01-08 16:53:03

노트 루이스의 대답에 :

당신은 가능성이 편지 = (N-1) *은 lineHeight + 글꼴 크기의 크기를 만들고 싶어, 여기서 n은 작은 정수입니다.

그래서, 15 픽셀 타입, 예를 들어 18 픽셀 행의 높이에 당신은 33 픽셀 (2 개 라인) 48 픽셀 (3 선) 63 픽셀 (4 개 라인)

난이 주위 재생 사용할 수 오랜 시간. 문제 : 대상 컴퓨터에있는 글꼴에 의존 할 수없고 글꼴의 변경으로 공간이 엉망이됩니다.

제대로 작동하려면 CSS의 브라우저 설정 중 일부를 무시해야합니다. 단락과 같은 글꼴을 사용하고 높이, 무게 및 색상 만 변경하는 것도 좋습니다.

나는 다른 방향으로가는 것을 끝내었다. 기준선을 동일하게 유지하면서 큰 뚜껑을 사용했다. 또한 이전 요소에서 더 많은 공간을 만들었습니다. 이것은 웹 프리젠 테이션의 엉성한 정의에서 더 잘 작동하는 경향이 있습니다.

출처

2015-01-12 20:41:04

첫 글자 선택 CSS

답변

관련 문제