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

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

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

[CSS] CSSで改行する、しない

CSS

レスポンシブデザインで、デバイスによって改行させたい、改行させたくないという場合があると思います。そんな時は、CSSで制御する事が出来ます。あとは、@media screenでデバイスのサイズを指定すれば振り分ける事が出来ます。

※何だか似たような記事を書いていました。

INDEX

CSSで改行 – 1

htmlに<br>を書かずに、CSSで改行させる場合。

例題:「CSSでbrを使わずに改行する」を「CSSで」で改行させるとします。

<h2>CSSで<span class="kaigyo">brを使わずに改行する<span></h2>
@media screen・・・・・・任意{
.kaigyo::before {
   content: "\A" ;
   white-space: pre ;
}
}

CSSで改行 – 2

改行させておいて、特定のデバイスでは改行させない方法です。htmlの<br>をCSSで消して、改行を解いています。

brにもclassを付ける事ができます。

<p>CSSで<br class="cancel">小さなデバイスでは改行しない</p>
@media not all and (min-width: 600px) {  任意
  .cancel{
    display: none;
  }
}

番外編:改行させない

ボタンやURLの途中で改行させたくない場合

<p class="no_br">https://cocotiie.com/</p>
.no_br{ white-space: nowrap;}

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

運営をサポートをして下さり ありがとうございます

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

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

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

コメントする

INDEX