iPhoneのSafariでのレイアウト崩れを解消したい

Question

実現したいこと

スマートフォンメニューを開いた部分に配置した、電話マークと問合わせ番号を横並びで表示させたいです。

発生している問題・分からないこと

iPhoneのSafariで表示させると、電話マークと番号が改行されて不自然な状態になってます。
なぜかiPhoneのChromeでは正常に表示されています。

該当のソースコード

<div class="contact-3line-sp">
   <p>ご相談は無料です</p>
   <p class="phone-num"><img src="img/icon_phone_white.svg" alt="">000-000-0000</p>
   <p>（月曜〜金曜）9時〜18時　（土曜）9時〜17時</p>
</div>

.phone-num a {
  color: #fff;
  text-decoration: none;
}

  .contact-3line-sp {
    width: calc(100% - 16px * 2);
    border-radius: 4px;
    background: #f00;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    line-height: 1.1;
    padding: 12px 0;
    margin-top: 72px;
  }

  .contact-3line-sp p:nth-child(1) {
    font-size: 24px;
    font-weight: bold;
  }

  .contact-3line-sp p:nth-child(2) img {
    width: 19px;
    height: 30px;
    margin-right: 5px;
    vertical-align: -2px;
  }

  .contact-3line-sp p:nth-child(2) {
    font-size: 38px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .contact-3line-sp p:nth-child(3) {
    font-size: 13px;
    margin-top: 4px;
  }

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

CSSにおいて
・省略していたwidthを追加してみました。
・横幅に余裕を持たせるために、画面幅全体に幅を広げてみました。
・white-space: nowrap;を追加してみました。

全て結果は変わらず、レイアウトは崩れたままでした。

補足

表示確認時の機種
iPhone SE3 iOS17.7.1（Safariも同じバージョンらしいです）
Chrome バージョン131.0.6778.73

Comments

[int32_t]

iPhoneのSafariとChromeは同一のレンダリングエンジンなので、このような描画の差が観測されること自体がおかしいです。同一のデバイス上で差が出るのでしょうか? 同一のデバイスであれば、Safariの方だけ古いコンテンツをロードしているとかないですか。

[ttaa7030]

改めてデータ更新時に一部文字変更するなどして確認しましたが、どちらのブラウザでも最新に更新されてるようでした。

Answer 1

とりあえずimgはfontawesomeとかにしてみて

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<div class="contact-3line-sp">
   <p>ご相談は無料です</p>
   <p class="phone-num"><i class="fa-solid fa-phone"></i>000-000-0000</p>
   <p>（月曜?金曜）9時?18時　（土曜）9時?17時</p>
</div>

nth-childへのwhitespaceはやめて、ピンポイントにphone-numクラスに指定したほうがよいかと

.phone-num{
  white-space: nowrap;
}

Comments

[ttaa7030]

以下の点を変更してみたのですが、アイコンは変更できましたが改行については変わらずそのままでした。
キャッシュ削除後でも同じでした。

変更した点
・電話マークをfontawesomeのアイコンに変更
・nth-child(2)の表記をphone-numで統一

[yambejp]

.phone-num{
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
}
とかではどうでしょう？

[ttaa7030]

こちらも変わらず改行は解消されませんでした。

[ttaa7030]

今回は画像に置き換えて対応することにしました。複数の提案をいただきありがとうございました。