CSS 텍스트 변환으로 모든 대문자 사용

내 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; }

칸이 "결국하고 깨끗 해졌다"는 답변으로 표시된 게시물의 댓글에 표시되지 않습니다.

captialize단어의 첫 글자에만 영향을 미칩니다. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

java 및 jstl에 유용 할 수 있습니다.

1. 현지화 된 메시지로 변수를 초기화하십시오.
2. 그 후 jstl toLowerCase 함수에서 사용할 수 있습니다.
3. CSS로 변환하십시오.

JSP에서

1.

<fmt:message key="some.key" var="item"/>

2.

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

CSS에서

삼.

.content {
  text-transform:capitalize;
}

CSS 첫 글자로 할 수 있습니다! 예를 들어 메뉴에서 원했습니다.

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

블록 요소로만 실행되므로 인라인 블록!

필자의 경우와 같이 데이터가 데이터베이스에서 오는 경우 선택 목록 / 드롭 다운 목록으로 보내기 전에 데이터를 낮출 수 있습니다. CSS에서는 할 수 없습니다.

많은 것을 조사한 후 대문자로만 첫 글자의 텍스트를 변경하는 jquery 함수 / 표현식을 찾았습니다. 입력 필드에 사용할 수 있도록 해당 코드를 적절하게 수정했습니다. 입력 필드에 무언가를 쓴 다음 다른 파일 또는 요소로 이동하면 해당 필드의 텍스트가 첫 글자 대문자로만 변경됩니다. 완전한 대문자 또는 대문자로 된 사용자 유형 텍스트에 관계없이 :

이 코드를 따르십시오 :

1 단계 : html 헤드에서 jquery 라이브러리를 호출하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2 단계 : 입력 필드의 텍스트를 변경하는 코드 작성 :

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

3 단계 : jquery 코드에서 사용하는 것과 동일한 ID로 HTML 입력 필드를 만듭니다.

<input type="text" id="edit-submitted-first-name" name="field name">

이 입력 필드의 id는 edit-submitted-first-name입니다 (2 단계의 jquery 코드에서 사용).

** 결과 : 다른 요소의 해당 입력 필드에서 포커스를 이동 한 후 텍스트가 변경되는지 확인하십시오. 여기서 jquery의 focus out 이벤트를 사용하기 때문에. 결과는 다음과 같습니다 : 사용자 유형 : "감사합니다" "감사합니다"로 변경됩니다. **

행운을 빕니다

백엔드의 PHP 솔루션 :

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

나는 이것이 늦은 응답이라는 것을 알고 있지만 다양한 솔루션의 성능을 비교하고 싶다면 내가 만든 jsPerf가 있습니다.

정규식 솔루션이 가장 빠릅니다.

다음은 jsPerf입니다. https://jsperf.com/capitalize-jwaz

정규식 솔루션에는 2 가지가 있습니다.

첫 번째는을 사용합니다 /\b[a-z]/g. 단어 경계는 비공개와 비공개와 같은 단어를 사용합니다.

공백이 앞에 오는 문자 만 대문자로 표시하려면 두 번째 정규식을 사용하십시오.

/(^[a-z]|\s[a-z])/g

jQuery를 사용하는 경우; 이것은 그것을 할 수있는 방법 중 하나입니다.

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

동일한 작업을 수행하는 버전을보다 쉽게 ​​읽을 수 있습니다.

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

데모

모든 잘못된 것이 존재합니다-> font-variant : small-caps;

텍스트 변환 : 자본; 첫 글자 만