::first-line疑似要素は、指定する要素のCSSのレイアウトが済んだところで、1行目部分を抽出し、::first-line疑似要素で指定するスタイルを適用します。サンプル(1)では、textareaの1行目部分のテキストを色を赤にしています。textareaの右下をドラッグしてサイズを操作し、文字数が変わっても1行目のの色は同様に赤くなります。

サンプル(2−1)は、親のdiv要素の中に、(1)で使ったテキストと同じものを2つに分けてそれぞれspan要素でくくっています。::first-line疑似要素は、親のdivに対して指定し、1行目部分のテキストを緑にしています。インラインのspan子要素は1つ目が折り返していますが、divにとっての1行目が緑になっています。

サンプル(2−2)は、(2−1)の横サイズだけを変えたものです。span子要素は1つ目では表示が足らず、2つ目がその後に続いて1行目を形成しています。この場合も、子要素の個数に関係なく、divにとっての1行目が緑になっています。

サンプル(1)のhtmlソース

<textarea>    
    野ねずみははじめ込みがいるだ。川は二はじい工合のようが思うてくださいまし。ボーは口楽器たりそれに教えるてやるまし。おっかさんは楽長にとてもと云いて包みを猫のようへはねあがって手へ泣いてまるで赤をしていた。
</textarea>

サンプル(1)のCSSソース

 /*1行目のテキストの色を赤に*/
  textarea::first-line {
	color:red;
	}

サンプル(1)textarea

 

サンプル(2−1)のhtmlソース

<div id="sample">
    <span>野ねずみははじめ込みがいるだ。川は二はじい工合のようが思うてくださいまし。</span>
    <span>ボーは口楽器たりそれに教えるてやるまし。おっかさんは楽長にとてもと云いて包みを猫のようへはねあがって手へ泣いてまるで赤をしていた。</span>
</div>

サンプル(2−1)のCSSソース

 /*1行目のテキストの色を緑に*/
  div #sample::first-line, div #sample2::first-line {
      color:green; 
    }

サンプル(2−1)2つのspan要素を内包したdiv要素(width:400px)

野ねずみははじめ込みがいるだ。川は二はじい工合のようが思うてくださいまし。 ボーは口楽器たりそれに教えるてやるまし。おっかさんは楽長にとてもと云いて包みを猫のようへはねあがって手へ泣いてまるで赤をしていた。

サンプル(2−2)2つのspan要素を内包したdiv要素(width:650px)

野ねずみははじめ込みがいるだ。川は二はじい工合のようが思うてくださいまし。 ボーは口楽器たりそれに教えるてやるまし。おっかさんは楽長にとてもと云いて包みを猫のようへはねあがって手へ泣いてまるで赤をしていた。
戻るボタン