Bootstrap移动端文本超出div容器问题求助

我是HTML和Bootstrap新手，开发时遇到一个异常问题：桌面端布局显示正常，但移动端下flip-card组件内的文本会超出父div容器；移除flip-card组件后，文本显示恢复正常。使用Bootstrap 5.2版本，相关代码如下：

HTML代码 #

<div class="row mt-3">
    <div class="col-md-6 mt-3 mt-md-0">
        <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img h-100 lzy_img" alt="Happy New Year 2023" width="100%" height="100%">
        </a>
    </div>
    <div class="col-md-6 mt-3 mt-md-0">
        <div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
            <h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
            <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
                <div class="flip-card h-100">
                    <div class="flip-card-inner h-100">
                        <div class="flip-card-front d-flex justify-content-center align-items-center">
                            <p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
                        </div>
                        <div class="flip-card-back d-flex justify-content-center align-items-center">
                            <p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
                <div class="left text-start">
                    <h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
                    <p class="mb-0"><small>1 day ago</small></p>
                </div>
                <div class="right">
                    <span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
                    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24"></a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码 #

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
    background:rgba(240, 240, 240, 0.99);
    color:#000;
    font-weight:600;
}
.flip-card-back {
  color:#000;
  transform: rotateY(180deg);
  background:rgba(240, 240, 240, 0.99);
  font-weight:600;
}

问题原因 #

问题出在flip-card-front和flip-card-back的绝对定位属性上：绝对定位元素的宽度计算逻辑与流式布局不同，加上未设置文本换行规则，在移动端窄屏环境下，非拉丁语系的长文本（无空格分隔）会直接突破容器宽度。

解决方案 #

给flip-card-front和flip-card-back添加文本换行约束和内边距，确保文本在容器内正确换行：

.flip-card-front, .flip-card-back {
    /* 保留原有属性 */
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 1rem; /* 可选，优化文本与容器边缘的间距 */
}

完整修复后的CSS代码：

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 1rem;
}
.flip-card-front {
    background:rgba(240, 240, 240, 0.99);
    color:#000;
    font-weight:600;
}
.flip-card-back {
  color:#000;
  transform: rotateY(180deg);
  background:rgba(240, 240, 240, 0.99);
  font-weight:600;
}

说明 #

• overflow-wrap: break-word：允许长单词在内部换行，避免超出容器
• word-break: break-word：针对无空格的非拉丁语系文本强制换行
• padding: 1rem：优化移动端文本显示的上下左右间距，避免贴边

内容的提问来源于stack exchange，提问作者Manisha