ブラウザ縮小時に、文章が改行してくれない

Question

レスポンシブ対応画面を作成しています。
ブラウザ縮小時に、１行だった文章が２行になるという設定をしたいのですが、できません。

ディベロッパーツールを見たりして、いろいろいじったのですが、自動改行できません。

もちろん、overflow-wrapやword-break、white-space:nowrap;も使ってみましたがうまくいきません。margin や paddingも色々いじったのですが・・・。

white-space:nowrap;で1行にできたとしても、改行できなくなりますし、
今の状態はwhite-space:nowrap;は使っていないですが、自動で折り返しされませんし・・・

どこが影響しているのか分かりません。
教えて下さい！！

  .footer{
    height: 1144px;
    background-color: black;
    padding-top: 1.7em;
    //display: flex;
    position: relative;
    
     

}
.circle {
    width: 225px;/*丸の形づくり*/
    box-sizing: border-box; /* 追加 */
    height: 225px;/*丸の形づくり*/
    border-radius: 50%;
    background: #fff;/*背景色*/
    border: 6px solid #121212; /*枠の設定*/
    //position: absolute;
    //top:100px; left:10px;
    margin:40px auto;
    display: block;
    flex-direction: column;
    //margin:-192px 55px 0px 45px;

  }

  .f-menu{
    display: block; /* //3つのアイコンを横並びにするために設定 */
    //justify-content: space-between;
    margin: 0 auto;
    max-width: 100%; /* 追加 */
    
  }

.f-list{
//display: block;
    z-index: 1;
    padding-bottom: 50px;
    width: auto;
    
}
.t-1{
    color: #fff;
    margin: 130px auto ;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    
}


.t-2{
    color: #fff;
    margin: -118px -230px 0px;
    font-weight: bold;
    text-align: center;
    //width: 100%;
    //max-width: 100%;
    overflow-wrap: break-word;
   
     
}

}

```html

@media screen and (max-width: 768px) {
  //（ここにスマホ用スタイルを記述）

 <div class="wrap">
        <footer class="footer">
          <ul class="f-menu">
            <li class="f-list">
              <div class="circle">
                <i
                  class="fas fa-dumbbell fa-6x"
                  data-fa-transform="down-9.5 right-7.5"
                ></i>
                <div class="t-1">ああああ</div>
                <div class="t-2">
                  いいいいいいいいいいいいいいいいいい
　　　　　　　　　いいいいいいいいいいいいいいいいいい
                </div>
              </div>
            </li>

            <li class="f-list">
              <div class="circle">
                <i
                  class="fas fa-chalkboard-teacher fa-6x"
                  data-fa-transform="down-9.5 right-7.5"
                ></i>
                <p class="t-1">うううう</p>
                <p class="t-2">
                  ええええええええええええええええええ
　　　　　　　　　ええええええええええええええええええ
                </p>
              </div>
            </li>

            <li class="f-list">
              <div class="circle">
                <i
                  class="far fa-life-ring fa-6x"
                  data-fa-transform="down-9.5 right-9.5"
                ></i>
                <p class="t-1">おおおお</p>
                <p class="t-2">
                  かかかかかかかかかかかかかかかか
                  かかかかかかかかかかかかかかかか
                </p>
              </div>
            </li>
          </ul>
        </footer>
      </div>

Comments

[k_a]

掲載のコードがぐちゃぐちゃです。

1. cssのコメントでダブルスラッシュ(//)は使えません
2. htmlがteratail上でコード表示になっていません
3. htmlで`@media screen and (max-width: 768px) {`は使えません

以上3点修正をお願いします。

Answer 1

.t-2
に

margin: -118px -230px 0px;

```の指定があるので、この影響で、文字がボックスの中で折り返していないように見えました。

いったん、
```CSS
margin: 0;

にすると、折り返しが効くようになるのかな、と思います。

質問者さんの実現したいレイアウトは、要素を重ねることだと思いますので、
たとえば、親要素に　position: relative; を指定して、子要素を絶対配置する、とかが有用かもしれません。

参考リンク：
CSSのposition: absoluteとrelativeとは
https://uxmilk.jp/63409

Answer 2

brタグを使用する。
改行しなくても良い時はbrタグにdisplay:noneを適用