CSS에서 첫 문자를 대문자로 만들기


255

CSS의 레이블에서 첫 번째 문자를 대문자 로 만드는 방법이 있습니까?

내 HTML은 다음과 같습니다.

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>


2
지정하려면-첫 번째 문자와 첫 번째 문자 만. 어떤이 만드는 text-transform: capitalize;여러 단어 가진 경우 충분하지
wiktus239

답변:


622

해당 속성이 있습니다.

a.m_title {
    text-transform: capitalize;
}

링크에 여러 단어가 포함될 수 있고 첫 단어의 첫 글자 만 대문자로하려면 :first-letter다른 변환을 사용하십시오 (실제로 중요하지는 않지만). 순서에 대한 것을 참고 :first-letter하여 작업 할 a요소는 블록 컨테이너해야 (될 수있는 display: block, display: inline-block또는 하나 이상의 속성의 다른 다양한 조합의) :

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

3
@alanjds : 예, CSS를 지원하는 모든 IE 버전에서 작동합니다. 아주 오래된 기술입니다.
BoltClock

3
이중 세미콜론을 사용하고 싶을 수도 있습니다. css-tricks.com/almanac/selectors/f/first-letter
ndequeker를

5
@Voles : IE8 이상을 지원할 필요가없는 경우에는 물론입니다. 원한다면 이중 콜론을 사용할 수 없다고 말하지 않았습니다. (2 년 반 전에 게시 된이 답변 당시, 개인적 정책 기본적으로 IE8을 지원하는 것이 었 습니다. 오늘은 더 이상하지 않습니다.)
BoltClock

1
경우 참고 display: block요구 사항은 (즉, 왜 누가 알 겠어)이 어려운하게, :first-letter또한 작동합니다 display: inline-block.
Mitya

1
@Henry Garcia De Guzman : 첫 글자 (각 단어 나 문장 등)뿐만 아니라 모든 것이 대문자이기 때문에.
BoltClock

55

참고 것으로 ::first-letter이 중 하나 여야합니다, 그래서 선택은 인라인 요소하지 작업을 수행 block하거나 inline-block같은 다음 :

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

1
제 경우에는 전체 텍스트가 이미 대문자로되어 있으므로 텍스트 변환을 소문자로 추가해야했습니다. .m_title에 이제 완벽하게 작동합니다!
hjuster


15

나는 사용하는 것이 좋습니다

#selector {
    text-transform: capitalize;
}

또는

#selector::first-letter {
    text-transform: uppercase;
}

그건 그렇고,이 w3schools 링크를 확인하십시오 : http://www.w3schools.com/cssref/pr_text_text-transform.asp


2
좋은 대답이지만 w3c 문서에 대한 링크는 아닙니다 .
Stephan

1
참고 : 텍스트 변환 '초기'는 '첫 글자 대문자'를 의미하지 않습니다. 오히려 '이 속성의 초기 기본값으로 되돌림'을 의미합니다.
Marcos Buarque

감사합니다. 권장 수정 사항을 모두 적용했습니다.
Marcos Buarque

5

먼저 소문자로 만드십시오.

.m_title {text-transform: lowercase}

그런 다음 첫 글자를 대문자로 만드십시오.

.m_title:first-letter {text-transform: uppercase}

"텍스트 변환 : 대문자 화"는 단어에 사용됩니다. 그러나 문장에 사용하려면이 솔루션이 완벽합니다.


2
: 첫 글자는 inline요소 와 함께 작동하지 않습니다 display:inline-block.이 경우로 설정 하십시오. ( stackoverflow.com/questions/7631722/… )
Fanky

1
<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

그것은 나를 작동합니다. concept ..paragraph 표시 첫 글자 대문자
Gnana Sekar

-2

CSS에서 다음 코드를 사용하는 것이 좋습니다.

    text-transform:uppercase; 

수업에 넣었는지 확인하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.