My Vector Space

  人生は寄り道してなんぼ

CSSだけで改行する方法

ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。

f:id:ooigawa-bitter-sweet:20171227131533j:plain

とくに致命的な問題ではないですが、やはり見やすさ レイアウトを考えるとだいぶ印象が違ってくるので、やはり直したいところです。

でもhtmlがいじれない CSSしかいじれない!!そんな状況になった時に便利な「CSSだけで改行する方法」をまとめておきます。

CSSだけで改行する方法

まず、移動させたい対象となる要素があったら、その直前にある要素をセレクタ名にして、この要素を基準に設定していきます。

記述のしかたは以下の2パターンになります。

基準にしたセレクタの後方で改行する場合
 【 CSS 】
 1
  .sample:after{
 2
  content: "\A";
 3
  white-space: pre;
 4
  }
基準にしたセレクタの前方で改行する場合
 【 CSS 】
 1
  .sample:before{
 2
  content: "\A";
 3
  white-space: pre;
 4
  }
PAGE TOP