기존의 모든 대문자를 유지하면서 CSS에서 각 단어의 첫 글자만 대문자로 사용하려면 어떻게 해야 합니까?

CSS text-transform: 대문자로 쓰기 딜레마

CSS의 text-transform 속성은 텍스트의 대문자 사용을 제어합니다. "대문자화"로 설정하면 각 단어의 첫 글자를 대문자로 표시합니다. 그러나 이는 이미 모두 대문자로 되어 있는 단어를 다룰 때 문제가 됩니다.

문제

제공된 HTML 및 CSS 스니펫:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

.link {
  text-transform: capitalize;
}

출력은 "Small Caps & ALL CAPS"이지만 원하는 출력은 "Small Caps & ALL CAPS"입니다. 대문자 및 모두 대문자."

솔루션

원하는 결과를 얻으려면 CSS 규칙 조합을 사용할 수 있습니다.

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

• 텍스트 변환: 소문자 규칙은 ".link" 요소의 모든 텍스트를 소문자.
• 의사 요소인 :first-letter 및 :first-line에 적용된 text-transform: uppercase 규칙은 각각 각 요소의 첫 글자와 첫 번째 줄을 대문자로 표시합니다.

이 접근 방식을 사용하면 이미 모두 대문자로 표시된 단어(예: "ALL CAPS")가 유지되면서 다른 단어의 첫 글자는 계속 대문자로 표시됩니다. 결과 출력은 다음과 같습니다.

Small Caps 
All Caps

위 내용은 기존의 모든 대문자를 유지하면서 CSS에서 각 단어의 첫 글자만 대문자로 사용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!