web-dev-qa-db-ja.com

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

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

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

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

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

これは、cssのみを使用する場合に最も近いものです。 javascript（jQueryと組み合わせて）を使用して、ピリオド（またはコンマなど）の後に来る各文字をspanでラップできます。上記と同じcssをそのspanに追加できます。または、javascriptでまとめて実行します。

CSSアプローチのスニペットを次に示します。

.qcont:first-letter {
  text-transform: capitalize
}
<p class="qcont">Word, another Word</p>
134
LuudJacobs

これはCSSではできません。 text-transformプロパティは、コンテンツ内のWordの配置に従って区別を行いません。また、文の最初のWordを選択するための擬似要素はありません。各文には、マークアップで実際の要素が必要です。しかし、それができるのであれば、おそらく適切なコンテンツで頭文字を大文字に変更することもできます。

文の先頭での大文字の使用は正書法の問題であり、オプションのスタイルの提案（CSS）やクライアント側のスクリプトではなく、コンテンツを生成するときに行う必要があります。文の境界を認識するプロセスは簡単ではありません。一般に、複雑な構文およびセマンティック分析なしで自動的に実行することはできません（たとえば、ピリオドで終わる略語は文の内部または文の末尾に表示される場合があります）。

4
Jukka K. Korpela

Contenteditableコンテナの最初の文字を大文字にする必要がある場合は、cssプロパティを使用できません

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

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

代わりに https://stackoverflow.com/a/7242079/6411398 のsakhunzaiが提供する例を試してみてください。

1
Alessandro Foolish Ciak DAnton