Webサイト内の文章の改行をCSSでコントロールする方法

HTML/CSS

Webサイトが表示される画面の幅などに応じて文章の改行をコントロールしたい時に、手段の一つとしてCSSでの対処が考えられます。
そんな時の記述方法の例を二つ紹介します。

brタグに”display: none;”を指定する方法

brタグはデフォルトで”display: inline;”が指定されていますので、htmlにbrタグを記述しておいて、改行が不要な場合に”display: none;”を指定することでCSSでの改行のコントロールができます。

<!-- htmlの記述例 -->

<p class="sample">一行目のテキスト<br>二行目のテキスト</p>
/* cssの記述例 */

@media (min-width: 768px) {
  .sample br {
    display: none;
  }
}

擬似要素(”::before”や”::after”)を利用する方法

CSSの擬似要素である”::before”や”::after”を利用して、改行を意味する”\A”を”white-space: pre;”を指定して入れることでCSSでの改行のコントロールができます。
※ちなみに、macで”\”(バックスラッシュ)を入力するには”option”+”¥”で入力できます。

<!-- htmlの記述例 -->

<p><span class="br-set">一行目のテキスト</span>二行目のテキスト</p>
/* cssの記述例 */

@media (max-width: 767px) {
  .br-set::after {
	  content: "\A" ;
	  white-space: pre;
	}
}

コメントを残す





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