CSS : 첫 글자가 작동하지 않음
Microsoft Word 문서에서 생성 된 일부 HTML 스 니펫에 CSS 스타일을 적용하려고합니다. Word가 생성 한 HTML은 상당히 끔찍하며 많은 인라인 스타일을 포함합니다. 다음과 같이 진행됩니다.
<html>
<head></head>
<body>
<center>
<p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>
<p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
</body>
</html>
... 그리고 아주 간단하게 제목 섹션의 첫 글자에 스타일을 지정하고 싶습니다. 더 크고 다른 글꼴 만 있으면됩니다. 이렇게하려면 다음 :first-letter과 같은 종류의 선택기 를 사용하려고합니다 .
p b span:first-letter {
font-size: 500px !important;
}
그러나 작동하지 않는 것 같습니다. 이것을 보여주는 바이올린이 있습니다.
제목 섹션의 첫 글자를 올바르게 스타일링하는 방법에 대한 아이디어가 있습니까? 약간의 어려움 없이는 아니지만 마크 업을 약간 변경할 수 있습니다 (예 : 사물 주위에 래퍼 div 추가).
::first-letter와 같은 인라인 요소 에서는 작동하지 않습니다 span. 단락, 표 캡션, 표 셀, 목록 항목과 같은 블록 요소 또는 속성이로 설정된 블록 요소 ::first-letter에서 작동 합니다 .displayinline-block
따라서 적용하는 것이 좋습니다 ::first-letterA를 p대신의 span.
p::first-letter {font-size: 500px;}
또는 ::first-letter선택기 를 원하는 경우 span다음과 같이 작성하십시오.
p b span::first-letter {font-size: 500px !important;}
span {display:block}
MDN 은이 명백하지 않은 행동에 대한 근거 를 제공합니다 .
::first-letter가 그 라인 (이미지 또는 인라인 테이블과 같은) 임의의 다른 콘텐츠가 선행되지 않는 경우 CSS 의사 요소는 블록의 제 1 라인의 첫 번째 문자를 선택한다....
첫 번째 라인은 따라서, 블록 컨테이너 박스에 의미가
::first-letter유사 요소는 요소와에만 영향 보유display값block,inline-block,table-cell,list-item또는table-caption. 다른 모든 경우::first-letter에는 효과가 없습니다.
예
참고 문헌
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter
범위의 표시 속성을 인라인 블록으로 설정하여 의도 한 동작을 얻을 수 있습니다.
.heading span {
display: inline-block;
}
.heading span:first-letter {
color: red;
}<div class="heading">
<span>An</span>
<span>Interesting</span>
<span>Heading</span>
</div>이는 :first-letter블록 / 인라인 블록 요소에서만 작동 하기 때문 입니다. SPAN인라인 요소입니다.
http://reference.sitepoint.com/css/pseudoelement-firstletter 에서 가져 왔습니다 .
The :first-letter pseudo-element is mainly used for creating common typographical effects like drop caps. This pseudo-element represents the first character of the first formatted line of text in a block-level element, an inline block, a table caption, a table cell, or a list item.
:first-letter is not working with display: flex, I have tried a solution with JavaScrpt:
$(".text").each(function(){
var txt = $(this).text().replace(/\s+/g,' ').trim() ;
$(this).text(txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
});
This is the test on codepen: https://codepen.io/anon/pen/KOzJLN
참고URL : https://stackoverflow.com/questions/7631722/css-first-letter-not-working
'programing' 카테고리의 다른 글
| 프로그래머 드보락 레이아웃으로 전환 할 생각 (0) | 2020.11.16 |
|---|---|
| C ++ 및 D의 메타 프로그래밍 (0) | 2020.11.16 |
| 디버깅하는 동안 브라우저 콘솔에서 Redux 스토어에 액세스 할 수 있습니까? (0) | 2020.11.16 |
| How do I install a color theme for IntelliJ IDEA 7.0.x (0) | 2020.11.16 |
| C ++ 표준에서 허용하는 멤버 변수와 동일한 생성자 인수 이름을 사용하여 멤버 변수를 초기화합니까? (0) | 2020.11.15 |