Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

CSS

レスポンシブデザインで制作する際、改行で困りました。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」に変更されたそうです。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX