Webサイト内の文章の改行を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;
}
}関連記事
CSSでテキストに下線を引く3つの方法
テキストに蛍光ペンで引いたマーカーのようなアンダーラインを引きたい時に使用できる方法について調べたので、CSSでテキストに下線を引く時に使える3つの方法についてそれぞれまとめて紹介していきたいと思います。 それぞれの方法ごとに出来ることできないことがあったりしますので、それぞれの特徴についてもまとめておきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す