63

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

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

4 に答える 4

189

.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>

于 2012-06-21T11:19:19.813 に答える
7

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

文頭の大文字化は正書法の問題であり、オプションの文体提案 (CSS) やクライアント側スクリプトではなく、コンテンツの生成時に行う必要があります。文の境界を認識するプロセスは簡単ではなく、一般に、複雑な構文および意味の分析なしでは自動的に実行できません (たとえば、ピリオドで終わる略語は、文の中または文の終わりに現れる場合があります)。

于 2012-06-21T05:27:45.260 に答える
0

text-transform:capitalize; は文の最初の文字を大文字にしますが、カンマも大文字にしたい場合は、JavaScript を記述する必要があります。ただし、@BoltClockに同意します。コンマの後に大文字にしたいのはなぜですか？

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

于 2012-06-21T00:19:33.050 に答える