>  기사  >  웹 프론트엔드  >  CSS에서 텍스트를 모두 대문자로 유지하면서 단어의 첫 글자만 대문자로 표시하려면 어떻게 해야 합니까?

CSS에서 텍스트를 모두 대문자로 유지하면서 단어의 첫 글자만 대문자로 표시하려면 어떻게 해야 합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-26 03:16:14338검색

How Can I Capitalize Only the First Letter of Words While Preserving All Caps Text in CSS?

CSS 텍스트 변환: 대문자로 대문자 사용

이 시나리오에서는 텍스트 변환 적용: 대문자 또는 대문자로 속성을 요소에 적용합니다. 소문자 텍스트는 소문자 단어에 대해 원하는 대문자를 사용합니다. 그러나 원하는 결과는 대문자를 유지하는 것인 모두 대문자 텍스트에서 문제가 발생합니다.

이 문제를 해결하기 위해 텍스트 변환(소문자와 텍스트)의 조합을 사용하여 CSS 솔루션을 구현할 수 있습니다. -transform: :first-letter 및 :first-line 의사 클래스와 함께 대문자 속성.

업데이트된 내용은 다음과 같습니다. CSS:

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

이 조합은 첫 글자의 대문자를 유지하면서 모든 텍스트를 소문자로 변환합니다. 제공된 HTML의 a 요소에 이 스타일을 적용하면 다음과 같은 원하는 출력을 얻을 수 있습니다.

Small Caps & All Caps

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.