我正在使用Bootstrap 5开发一个小网站。当我使用Firefox中的开发工具测试移动的部分时（选择iPhone 12/13）。
这句话的换行时间太早了。“558/”肯定是合适的。当我在我的Iphone12上试用它时，它似乎并不关心容器右边的填充来确定单词的换行。
以下是它在我手机上的显示：

下面是它在Firefox iPhone 12/13开发工具中的外观（应该是这样的）：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="content-container" class="container-xxl mx-auto p-4 bg-white">
  <main>
    <div class="row p-xl-4">
      <div class="container">
        <div class="mb-5 col-sm-12 col-md-8 p-4" style="border: 2px solid red">
          www.trrrrrrrrrr.co.uk/rrrrrrr/558/rrrwwwwrrrrr-rrrrrr
        </div>
      </div>
    </div>
  </main>
</div>

我怎样才能把它调整好呢？