white-space : pre;これを指定すると。長い文章の場合でも折り返さずに表示できる。CSS

CSS で white-space これを指定すると。長い文章の場合でも折り返さずに表示できる。
通常何も指定してない場合は。要素の端で自動で折り返される。

このwhite-spaceは、要素内での文字列を
制御するとこが出来るプロパティになります。

文字の（折り返し・改行・スペース・空白）など制御が可能。

使い方覚えると、コーディングの幅が広がると思いますので参考にしてください。

white-spaceの効果比較
white-space：　normal；
white-space：　nowrap；
white-space：　pre-line；
white-space：　pre；
white-space：　pre-wrap；
white-space：　break-spaces；
今回書いたコードも参考に置いときます。
フリーランス案件

white-spaceの効果比較

white-spaceには、

normal
nowrap
pre-line
pre
pre-wrap
break-spaces

の6種類があります。

それぞれの効果はこんな感じになります。

white-space：　normal；

white-space：　normal；　(初期値)
HTMLで書いた改行や半角スペース１つの空白になる
自動で折り返しされる

white-space：　nowrap；

white-space：　nowrap；
HTMLで書いた改行や半角スペース１つの空白になる
自動で折り返しされない

white-space：　pre-line；

white-space：　pre-line；
HTMLで書いた改行は反映半角スペース１つの空白になる
自動で折り返しされる

white-space：　pre；

white-space：　pre；
HTMLで書いた改行や半角スペースが反映される
自動で折り返しされない

white-space：　pre-wrap；

white-space：　pre-wrap；
HTMLで書いた改行や半角スペースが反映される
自動で折り返しされる

white-space：　break-spaces；

white-space：　break-spaces；
HTMLで書いた改行や半角スペースが反映される
自動で折り返しされる

このwhite-spaceを使うと、テキストの折り返しを
するかどうかの設定が可能になります。

こんな方法もあるんだと頭の片隅にでも入れておいて下さい。

今回書いたコードも参考に置いときます。

HTML

  <body>
    <div class="kensyou">
      <div class="kensyou-box">
        <p>normal:</p>
        <div class="box normal">ここの文章は テスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>
      </div><!-- /.kensyou-box -->

      <div class="kensyou-box">
        <p>nowrap:</p>
        <div class="box nowrap">ここの文章は テスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>
      </div><!-- /.kensyou-box -->

      <div class="kensyou-box">
        <p>pre-line:</p>
        <div class="box pre-line">ここの文章は テスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>
      </div><!-- /.kensyou-box -->

      <div class="kensyou-box">
        <p>pre:</p>
        <div class="box pre">ここの文章は テスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>
      </div><!-- /.kensyou-box -->

      <div class="kensyou-box">
        <p>pre-wrap:</p>
        <div class="box pre-wrap">ここの文章は テスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>
      </div><!-- /.kensyou-box -->

      <div class="kensyou-box">
        <p>break-spaces:</p>
        <div class="box break-spaces">ここの文章は テスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>
      </div><!-- /.kensyou-box -->

    </div>
  </body>

<body>

<p>normal:</p>

<div class="box normal">ここの文章はテスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>

</div>

<p>nowrap:</p>

<div class="box nowrap">ここの文章はテスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>

</div>

<div class="box pre-line">ここの文章はテスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>

</div>

<div class="box pre">ここの文章はテスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>

</div>

<div class="box pre-wrap">ここの文章はテスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>

</div>

<p>break-spaces:</p>

<div class="box break-spaces">ここの文章はテスト折り返し<br>CSS white-space<br>折り返し設定様々な設定</div>

</div>

</div>

</body>

CSS

* { 
  box-sizing: border-box;
}
p {
  margin: 0;
}
.kensyou {
  max-width: 300px;
  font-size: 30px;
  margin: auto;
}
.kensyou-box {
  margin-top: 140px;
}
p {
  color: #000;
  background: pink;
  padding: 10px;
  margin-top: 20px;
}
.box {
  border: 1px solid #000;
}
.normal{
  white-space: normal;
}
.nowrap{
  white-space: nowrap;
}
.pre{
  white-space: pre;
}
.pre-wrap{
  white-space: pre-wrap;
}
.pre-line{
  white-space: pre-line;
}
.break-spaces{
  white-space: break-spaces;
}