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

JavaScriptを使用して変換.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>のタグ<div>何らかの理由で擬似要素があるため、タグの::first-lineでは動作しません<a>タグをネイティブではなくどちらか<div>または<p>罰金です。 EDIT：<a>要素が動作する場合display: inline-block;に追加され.linkたクラス。それを発見してくれたDave Landに感謝します！

新注：場合、テキストは折り返され、第2行目に実際になりましたので、それが大文字と小文字を失うことになる（最初の行はまだ大丈夫です）。

JavaScript：

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

Khanが "最終的にやっている"（これはよりクリーンで私にとっては効果的でした）ことは、回答としてマークされた投稿のコメントに含まれています。

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で

3。

.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ます。単語の境界は、非開示から非開示などの単語の大文字になります。

スペースが先行する文字だけを大文字にしたい場合は、2番目の正規表現を使用します

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

jQueryを使用している場合。これはそれを行う1つの方法です。

$('.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;

テキスト変換：大文字化; 最初の文字のキャップだけ