13

今、段落があり、最初の行全体を大文字にしたいと思います。最初の段落をID「firstp」に設定して、次のことを試しました。

#firstp::first-line {
  text-transform: uppercase;
}

試してみましたtext-transform: capitalizeが、うまくいきません。を使用して最初の文字を変更する（フォントサイズを変更する）ことができたので、奇妙です#firstp:first-letter。

4

6 に答える 6

8

text-transformon:first-lineは現在本当にバグがあります。こちらのリファレンスを参照してくださいhttp://reference.sitepoint.com/css/text-transform

linify https://github.com/octopi/Linifyと呼ばれるこのjqueryプラグインを使用して、最初の行を選択してから、のプロパティを適用できます。text-transform: uppercase

よろしく、

于 2012-08-04T14:20:40.460 に答える
2

Chromeには「：first-line」に問題があると思います。それを削除し、このページでjames31rockの構文を使用してみてください。ただし、彼の例では、CSSは「.makeupper」ではなく「#firstp{...」でHTMLにIDを反映する必要があります。

于 2013-10-30T01:59:43.887 に答える
0

あなたは使用したいかもしれません：

font-variant: small-caps;

私の意見では見栄えが良く、すべての主要なブラウザでサポートされています。

より詳しい情報

http://en.wikipedia.org/wiki/Small_caps

于 2012-08-04T15:40:42.557 に答える
0

これを実現するには、正しい構文内で次の疑似要素を使用する必要があります。例：

HTML部分：

<selection id="Welcome">
<p>Some text</p>
</section>

CSSシート：

#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}

これがお役に立てば幸いです。エントリーが遅くなってすみません。私は、決して遅くなるよりはましだと思います！

于 2013-05-29T05:15:58.853 に答える
0

別の方法があるかもしれません...

段落内にテキストがある2つのスパンがある場合、スパンの1つは段落の左上隅に位置が設定されるため、2つのスパンはオーバーラップします。次に、上部スパンの高さをline-heightテキストの約に設定overflowし、非表示にして、スパンの最初の行のみが表示されるようにします。text-transform上部スパンを大文字に設定すると、最初の行が大文字になります。

このソリューションの欠点は、大文字のテキストが広いため、次の行に単語が欠落している可能性があることです。これは、固定幅フォントを使用して修正するかletter-spacing、大文字と小文字のテキストの幅が同じになるように両方のスパンに設定してみてください。

これがjsFiddleですが、ウィンドウサイズを変更する場合は理想的ではない場合もありますが、それで十分な場合があります。

于 2016-05-21T14:08:43.167 に答える
-1

Chromeではどちらの方法でも機能しないようです。つまり、テキスト変換は機能します。テストするFirefoxがありません。

http://jsfiddle.net/vJSeq/4/-text-decorationを使用

http://jsfiddle.net/vJSeq/3/-text-transformを使用

セレクターが強調表示されているため、セレクターが正しいことがわかります。

私の提案は、段落内にスパンタグを作成し、それにクラスを割り当てることによって、強調表示するテキストを分離するために何かを使用することです。

<p id="firstp">to stop the degradation of the planet's natural environment and to build a future in <span class="makeupper">which humans live in harmony with nature, by; conserving</span> the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
​

とcss

.makeupper
{
  text-transform: uppercase;  
}

http://jsfiddle.net/vJSeq/5/

于 2012-08-04T13:37:40.093 に答える