文節の折り返し

折り返し方法

jsライブラリ

cssプロパティ

折り返し方法

1. br

メディアクエリでbr制御
タブレット　46em（736px）以下
スマホ 26.875em（430px – iPhone 14 pro max -）以下

・記述が楽

・柔軟性がない
・320px、375px、415pxなど増える場合があり

.br_br {
  & .pc {
    display: inline-block;
    @media screen and (max-width: 46em) {
      display: none;
    }
  }
  & .sp {
    display: none;
    @media screen and (max-width: 46em) {
      display: inline-block;
    }
  }
  & .tablet {
    display: none;
    @media screen and (max-width: 26.875em) {
      display: inline-block;
    }
  }
}

親譲りの無鉄砲で小供の時から損ばかりしている。
[br class=”tablet”] 小学校に居る時分学校の二階から飛び降りて、
[br class=”sp”] 一週間ほど腰を抜かした事がある。
[br class=”sp”] なぜそんな無闇をしたと聞く人があるかも知れぬ。
[br class=”tablet”] 別段深い理由でもない。

2. wbr

テキスト内でブラウザーが任意で改行可能な位置を指定
親タグに[word-break: keep-all;] [overflow-wrap: anywhere;] を追加

・柔軟性が高い
・記述がそこそこ楽

・変なところで改行する場合あり ※要確認
・「/」など半角記号が先頭にあると前行に残る場合あり

htmlに指定 :
必要な追加タグ lang="ja"属性

親タグに[word-break] [overflow-wrap] を追加
.wbr_br {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

効かない場合 bodyに追加
body{ 
  word-break: break-all;
  overflow-wrap: anywhere;
}

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて、一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

3. display: inline-block;

wbrと似たようなやり方で span（inline-block）でくくる

・柔軟性が高い
・記述が面倒見た目が嫌

・エラー表示になることは少ない

.span_br span {
  display: inline-block;
}


html
<p class="span_br">
<span>親譲りの無鉄砲で小供の時から損ばかりしている。</span>
<span>小学校に居る時分学校の二階から飛び降りて、</span>
<span>一週間ほど腰を抜かした事がある。</span>
<span>なぜそんな無闇をしたと聞く人があるかも知れぬ。</span>
<span>別段深い理由でもない。</span>
</p>

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて、一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。