Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS]指定した位置で改行する方法( :after)

レスポンシブデザインで制作する際、改行で困りました。html(br)で改行してしまうと、横幅が異なるデバイスで表示すると変な感じになってしまう場合がありますよね?::after の疑似要素を使って改行させることが出来ます。

例えば、

<h2><span>1行目の文章です。この後ろで改行させたい↓</span>2行目の文章</h2>

↓の後ろから次の行にしたいとします。
「1行目の文章です。この後ろで改行させたい↓2行目の文章」 と同一行で出力されるか、小さなデバイスの場合は変な所で改行されてしまう場合も。


/*--結果:
1行目の文章です。この後ろで改行させたい↓
2行目の文章--*/

/*改行させたい場合*/
h2 span::after {
     content: "\A";
     white-space: pre;
 }

/*改行させたくない場合*/
h2 span::after {
     content: "\A";
     white-space: nowrap;
 }

これなら@mediaでデバイス毎に設定も出来ますね。

CSS2では「:after」でしたが、CSS3で「::after」に変更されたそうです。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる