반응형
CSS에서 첫번째 문자 대문자 만들기
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>
이를 위한 재산이 있습니다.
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;
}
참고하세요.::first-letter
selector는 인라인 요소와 함께 작동하지 않으므로 다음 중 하나여야 합니다.block
아니면inline-block
, 다음과 같이
.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
또는:
text-transform: capitalize;
먼저 소문자로 바꿉니다.
.m_title {text-transform: lowercase}
그럼 첫 글자 대문자로 해주세요.
.m_title::first-letter {text-transform: uppercase}
"text-signal: capitalize"는 단어에 적합하지만 문장에 사용하고 싶다면 이 솔루션이 완벽합니다.
예:
.m_title {
display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/fanky) */
text-transform: lowercase
}
.m_title::first-letter {
text-transform: uppercase
}
<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr gwwr gwwr</a>
사용할 것을 제안합니다.
#selector {
text-transform: capitalize;
}
아니면
#selector::first-letter {
text-transform: uppercase;
}
참고로, 이 w3wlink: http://www.w3schools.com/cssref/pr_text_text-transform.asp 를 확인해보세요.
<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>
CSS에서 다음 코드를 사용하는 것을 권장합니다.
text-transform:uppercase;
수업시간에 꼭 넣어주세요.
반응 네이티브에서도 작동:
textTransform: 'capitalize'
언급URL : https://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css
반응형
'programing' 카테고리의 다른 글
백스페이스를 감지하고 "입력" 이벤트를 지연하시겠습니까? (0) | 2023.09.06 |
---|---|
Maria에서 소문자 테이블 이름을 변경할 수 없습니다.DB (0) | 2023.09.06 |
Powershell에서 공백 문자가 가변적인 분할 문자열 (0) | 2023.09.06 |
간격이 실행 중인지 확인하고 그 반대의 경우 (0) | 2023.09.06 |
Android에서 네트워크 연결 유형 검색 (0) | 2023.09.01 |