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

CSS

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

※何だか似たような記事を書いていました。こちらも併せてどうぞ。CSSで改行する、しない>>

例えば、

<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」に変更されたそうです。

参考サイト

この記事は2013年5月に旧ブログに書いたものを編集し引っ越しさせました。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください