내 HTML은 다음과 같습니다.
<a href="#" class="link">small caps</a> &
<a href="#" class="link">ALL CAPS</a>
내 CSS는 다음과 같습니다.
.link {text-transform: capitalize;}출력은 다음과 같습니다.
Small Caps & ALL CAPS그리고 출력을 원합니다.
Small Caps & All Caps어떤 아이디어?
답변
CSS를 사용 하여이 작업을 수행 할 수있는 방법이 없으므로 PHP 또는 Javascript를 사용할 수 있습니다.
PHP 예 :
$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps
jQuery 예제 (지금 플러그인입니다!) :
// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
return this.each(function(){
var val = $(this).text(), newVal = '';
val = val.split(' ');
for(var c=0; c < val.length; c++) {
newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
}
$(this).text(newVal);
});
}
$('a.link').ucwords();
답변
당신은 거의 그것을 할 수 있습니다 :
.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }그것은 당신에게 출력을 줄 것입니다 :
Small caps
All caps답변
사용하여 자바 스크립트로 변환 .toLowerCase()하고 capitalize나머지를 할 것입니다.
답변
재미있는 질문!
capitalize단어의 모든 첫 글자를 대문자로 변환 하지만 다른 글자는 소문자로 변환 하지 않습니다 . :first-letter의사 클래스 조차도 (각 단어가 아닌 각 요소의 첫 번째 문자에 적용되기 때문에) 자르지 않으며 원하는 결과를 얻기 위해 소문자와 대문자를 결합하는 방법을 볼 수 없습니다.
내가 볼 수있는 한, 이것은 실제로 CSS와 관련이 없습니다.
@Harmen은 그의 대답에 멋진 PHP 및 jQuery 해결 방법을 보여줍니다.
답변
제시된 첫 글자 솔루션 보다 유용 하지만 매우 유사한 순수한 CSS 솔루션을 제안 하고 싶습니다 .
.link {
text-transform: lowercase;
display: inline-block;
}
.link::first-line {
text-transform: capitalize;
}<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD! ( now working! )</a>이것은 첫 번째 줄로 제한되지만 첫 번째 단어뿐만 아니라 전체 줄에 대문자를 적용하기 때문에 첫 번째 문자 솔루션 보다 더 많은 사용 사례에 유용 할 수 있습니다 . (첫 번째 줄의 모든 단어) OP의 특정 사례 에서이 문제를 해결할 수있었습니다.
참고 : 첫 번째 편지 솔루션 의견 에서 언급했듯이 CSS 규칙의 순서가 중요합니다! 또한 내가 변경된 점에 유의 <a>A에 대한 태그 <div>때문에 의사 요소가 어떤 이유로 태그 ::first-line와 함께 일을하지 않는 <a>태그 기본적으로 하지만 중 하나 <div>또는 <p>정상입니다.
편집 :<a> 요소가 작동 할 경우 display: inline-block;받는 사람 추가 .link클래스입니다. 그것을 발견해 준 Dave Land 에게 감사 합니다!
새로운 참고 : 텍스트가 줄 바꿈 되면 실제로 두 번째 줄에 있기 때문에 대문자가 느슨해집니다 (첫 번째 줄은 여전히 괜찮습니다).
답변
자바 스크립트 :
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].innerHTML = links[i].innerHTML.toLowerCase();
}CSS :
.link { text-transform: capitalize; }칸이 “결국하고 깨끗 해졌다”는 답변으로 표시된 게시물의 댓글에 표시되지 않습니다.
