文章の最初の文字を大文字にするCSS

Question

可能であれば、文章の最初の文字と、最初の文字をコンマの後に大文字にしたい。私はここにコードを追加します：

.qcont { 
    width: 550px; 
    height: auto; 
    float: right; 
    overflow: hidden; 
    position: relative; 
} 

Answer 1

.qcont要素の最初の文字は、疑似要素:first-letterを使用して大文字にすることができます。

.qcont:first-letter{ 
    text-transform: capitalize 
} 

これは、CSSでのみ得られる最も近いものです。 spanにピリオド（またはカンマ、希望どおり）の後に来る各文字をラップするには、javascript（jQueryと組み合わせて）を使用できます。あなたは上記と同じCSSをspanに追加することができます。または、一緒にjavascriptでやってください。ここで

は、CSSのアプローチのためのスニペットです：あなたはのcontentEditableコンテナ内の最初の文字を大文字にする必要がある場合は

.qcont:first-letter { 
 
    text-transform: capitalize 
 
}

<p class="qcont">word, another word</p>

Answer 2

text-transform:capitalize;は、文の最初の文字を大文字にしますが、あなたはまた、コンマのためにそれをしたい場合は、いくつかのJavaScriptを記述する必要があります。私は@BoltClockに同意します。なぜ地球上でコンマの後に大文字を使用したいのですか？

編集：読者の便宜上：text-transform:capitalize;は文の各単語だけでなく、最初の1を大文字にします。 上記では、:first-letter CSSセレクタを使用する必要があります。

Answer 3

これはCSSでは実行できません。 text-transformプロパティは、コンテンツ内の単語の配置に応じて区別されず、文の最初の単語を選択するための疑似要素はありません。それぞれの文に対して、マークアップで実際の要素を持つ必要があります。しかし、あなたがそれを行うことができれば、最初の文字を内容の大文字に変更するだけで十分でしょう。

文頭に大文字を使用するのは正書法の問題であり、オプションの文章候補（CSS）やクライアントサイドスクリプトではなく、コンテンツを生成するときに行う必要があります。文境界を認識するプロセスは些細ではなく、複雑な構文的および意味的分析（例えば、文章の中または文の終わりにピリオドで終わる略語が現れることがある）なしで自動的に実行することはできない。

Answer 4

あなたはCSSプロパティを使用することはできません

#myContentEditableDiv:first-letter { 
    text-transform: capitalize; 
} 

自動的に文字を削除しようとすると、contenteditableに含まれるすべてのテキストが削除されるためです。

代わりに、実際の解決策については、https://stackoverflow.com/a/7242079/6411398にsakhunzaiが提供する例を試してください。