모두 대문자 단어에 영향을 주지 않고 `text-transform: capitalize`를 어떻게 사용할 수 있나요?

CSS 텍스트 변환 재정의: 모두 대문자 텍스트에 대문자 사용

문제:

CSS 텍스트 변환 활용: 대문자 사용 ; 모두 대문자 텍스트를 문장 케이스로 변환하는 규칙은 해당 단어의 첫 글자가 고유 명사 또는 두문자어와 같이 본질적으로 대문자가 필요한 경우 문제가 됩니다.

다음 코드 조각에서 설명된 것처럼 "Small"의 원하는 출력은 대문자 및 전체 대문자"가 달성되지 않았습니다:

HTML:

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

CSS:

.link {text-transform: capitalize;}

결과:

Small Caps & ALL CAPS

해결책:

텍스트 변환을 유지하면서 원하는 대문자 사용 동작을 달성하려면: capitalize; 규칙에 따라 다음 CSS를 구현할 수 있습니다.

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

이 수정은 처음에 모든 텍스트를 소문자로 변환한 다음 각 단어의 첫 글자와 텍스트의 첫 번째 줄을 다시 대문자로 바꿉니다.

결과:

Small Caps
All Caps

위 내용은 모두 대문자 단어에 영향을 주지 않고 `text-transform: capitalize`를 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!