CSS로 첫 글자를 일관되게 내보내나요?
-
01-07-2019 - |
문제
본문 첫문단의 첫글자 내어쓰기를 구현하려고 합니다.제가 막히는 부분은 첫 글자와 단락의 나머지 부분 사이에 일정한 간격을 두는 것입니다.
예를 들어, "W"와 "I" 사이의 간격에는 큰 차이가 있습니다.
차이점을 완화하는 방법에 대한 아이디어가 있는 사람이 있습니까?나는 순수한 CSS 솔루션을 선호하지만 필요한 경우 JavaScript를 사용할 것입니다.
추신:IE나 Opera에서 반드시 호환성이 필요한 것은 아닙니다.
해결책
이것을 적용하십시오 p.outdent:first-letter
:
margin-left: -800px;
padding-right: 460px;
float: right;
이렇게 하면 첫 번째 문자가 단락의 오른쪽 가장자리에 배치된 다음 단락 너비만큼 왼쪽으로 이동한 다음 문자와 모든 패딩을 플로트의 큰 음수 여백으로 이동하여 단락이 여백을 두고 감싸려고 하지 않습니다.
다른 팁
나는 'courier new'와 같은 고정 너비 글꼴을 사용해 보았지만 문자의 너비가 거의 같기 때문에 눈에 띄지 않게 되었습니다.
편집 - 이 글꼴은 괜찮지만 Windows에서만 작동할 수 있습니다.
p.outdent:first-letter {
font-family: ms mincho;
font-size: 8em;
line-height: 1;
font-weight: normal;
float: left;
margin: -0.1em 0 0 -.55em;
letter-spacing: 0.05em;
}
제휴하지 않습니다 StackOverflow