Laravel项目iOS端Accordion文本无法换行，Android端正常

问题概述 #

Laravel项目的FAQ页面中，折叠面板组件在Android设备上文本换行正常，但在iPhone的Safari浏览器中，折叠面板内的文本无法自动换行，超出容器宽度后横向溢出。已尝试添加text-wrap: wrap和white-space: normal属性，问题仍未解决。

iPhone端表现：文本超出容器宽度，不自动换行
电脑端表现：文本正常换行，完整显示在容器内

核心原因 #

iOS Safari的WebKit引擎对flex布局下的文本换行处理存在特殊逻辑：

• flex子元素默认min-width: auto，会优先适应内容宽度而非容器宽度
• 部分现代CSS换行属性（如text-wrap）在iOS上兼容性不足，需添加-webkit前缀
• 连续无空格的长文本（如长单词、URL）不会触发自动换行

针对性修复方案 #

1. 修正Flex容器的子元素换行规则 #

.accordion-heading-block是flex容器，需强制子元素适应容器宽度：

.accordion-heading-block {
    /* 保留原有属性，新增以下配置 */
    flex-wrap: wrap;
}

.accordion-heading {
    flex: 1; /* 让标题占满剩余可用宽度 */
    min-width: 0; /* 关键：打破flex子元素默认的最小宽度限制 */
    white-space: pre-wrap; /* 兼容iOS的换行规则 */
    word-wrap: break-word; /* 强制拆分长单词/连续字符 */
}

2. 添加iOS兼容的-webkit前缀 #

针对iOS Safari的特性，为文本换行属性添加前缀：

.faq-section .accordion-heading strong {
    text-wrap: wrap;
    -webkit-text-wrap: wrap; /* iOS Safari兼容前缀 */
    word-break: break-all; /* 强制截断任意长度的文本 */
}

3. 修复折叠内容区的文本换行 #

如果问题出在展开后的.accordion-body-content内，需同步配置：

.accordion-body-content {
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    -webkit-overflow-wrap: break-word; /* iOS兼容 */
}

4. 强制覆盖继承的异常属性 #

排查是否有父元素继承了white-space: nowrap等属性，强制覆盖：

.accordion-heading,
.accordion-heading strong,
.accordion-body-content {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    -webkit-overflow-wrap: break-word !important;
}

验证步骤 #

1. 清除iOS Safari的缓存（设置> Safari> 清除历史记录与网站数据）
2. 刷新页面测试不同长度的文本内容
3. 确认Android设备的显示不受影响

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