CSS로 텍스트를 소문자로 바꾼 후 대문자로 표시할 수 있나요?

CSS를 사용하여 소문자로 바꾼 후 텍스트를 대문자로 표시

질문: 텍스트를 먼저 소문자로 만든 다음 다음을 사용하여 대문자로 표시하는 것이 가능합니까? CSS?

예:

• HELLO WORLD → Hello World

추가 컨텍스트: 대문자로 된 국가 목록(예: UNITED KINGDOM)을 소문자로 변환해야 합니다(예: United Kingdom).

답변:

예, CSS는 제공합니다. 이 작업에 대한 솔루션:

<code class="css">.className {
  text-transform: capitalize;
}</code>

이 CSS는 className 클래스가 있는 요소에 text-transform: capitalize 속성을 적용하여 자동으로 모든 소문자를 대문자로, 각 단어의 첫 글자를 소문자로 변환합니다.

JavaScript를 사용하는 대체 솔루션:

CSS가 옵션이 아닌 경우 JavaScript를 사용하여 동일한 결과를 얻을 수 있습니다.

<code class="javascript">function capitalize(s) {
  return s.toLowerCase().replace(/\b./g, function (a) {
    return a.toUpperCase();
  });
}

capitalize('this IS THE wOrst string eVeR');</code>

The capitalize 함수는 문자열 s를 입력으로 사용하고 toLowerCase()를 사용하여 이를 소문자로 변환한 다음 정규 표현식과 함께 바꾸기 메서드를 사용하여 모든 단어 경계(b)를 해당 대문자로 바꿉니다. 이렇게 하면 각 단어의 첫 글자는 대문자로 표시되고 나머지는 소문자로 표시됩니다.

위 내용은 CSS로 텍스트를 소문자로 바꾼 후 대문자로 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!