我目前正在开发一个 Laravel 项目，其中有一个带有手风琴文本的常见问题解答页面。手风琴功能在 Android 设备上运行得很好，但我在 iOS iPhone 上遇到了一个问题，即手风琴项目内的文本无法正确换行。
<section class="faq-section section-gap-bottom">
<div class="w-layout-blockcontainer container w-container">
<div class="accordion-wrapper">
@if (count($questions) > 0)
@foreach ($questions as $key => $question)
<div data-delay="0" data-hover="false">
<div class="accordion-heading-block w-dropdown-toggle close-acc"
data-target=".dropdown-list-{{ $key }}">
<div class="accordion-image w-embed">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 363 363"
style="enable-background: new 0 0 363 363" xml:space="preserve" width="100%"
height="100%">
<g>
<path
d="M277.73,94.123c0,10.997-8.006,17.685-13.852,22.593c-2.214,1.859-6.335,5.251-6.324,6.518 c0.04,4.97-3.956,8.939-8.927,8.939c-0.025,0-0.05,0-0.075,0c-4.936,0-8.958-3.847-8.998-8.792 c-0.079-9.747,7.034-15.584,12.75-20.383c4.485-3.766,7.426-6.416,7.426-8.841c0-4.909-3.994-8.903-8.903-8.903 c-4.911,0-8.906,3.994-8.906,8.903c0,4.971-4.029,9-9,9s-9-4.029-9-9c0-14.834,12.069-26.903,26.904-26.903 C265.661,67.253,277.73,79.288,277.73,94.123z M248.801,140.481c-4.971,0-8.801,4.029-8.801,9v0.069 c0,4.971,3.831,8.966,8.801,8.966s9-4.064,9-9.035S253.772,140.481,248.801,140.481z M67.392,203.174c-4.971,0-9,4.029-9,9 s4.029,9,9,9h0.75c4.971,0,9-4.029,9-9s-4.029-9-9-9H67.392z M98.671,203.174c-4.971,0-9,4.029-9,9s4.029,9,9,9h0.749 c4.971,0,9-4.029,9-9s-4.029-9-9-9H98.671z M363,59.425v101.301c0,23.985-19.232,43.448-43.217,43.448H203.066 c-2.282,0-4.161-0.013-5.733-0.046c-1.647-0.034-3.501-0.047-4.224,0.033c-0.753,0.5-2.599,2.191-4.378,3.83 c-0.705,0.649-1.503,1.363-2.364,2.149l-33.022,30.098c-2.634,2.403-6.531,3.025-9.793,1.587c-3.262-1.439-5.552-4.669-5.552-8.234 v-95.417H43.72c-14.062,0-25.72,11.523-25.72,25.583v101.301c0,14.061,11.659,25.116,25.72,25.116h130.374 c2.245,0,4.345,1.031,6.003,2.545L207,317.523v-85.539c0-4.971,4.029-9,9-9s9,4.029,9,9v105.938c0,3.565-2.04,6.747-5.303,8.186 c-1.167,0.515-2.339,0.718-3.566,0.718c-2.204,0-4.378-0.905-6.069-2.449l-39.457-36.204H43.72c-23.986,0-43.72-19.13-43.72-43.116 V163.757c0-23.985,19.734-43.583,43.72-43.583H138V59.425c0-23.986,19.885-43.251,43.871-43.251h137.913 C343.768,16.174,363,35.439,363,59.425z M345,59.425c0-14.061-11.157-25.251-25.217-25.251H181.871 C167.81,34.174,156,45.364,156,59.425v69.833v83.934l18.095-16.353c0.838-0.765,1.777-1.465,2.462-2.097 c8.263-7.614,10.377-8.831,21.155-8.609c1.47,0.031,3.221,0.042,5.354,0.042h116.717c14.06,0,25.217-11.388,25.217-25.448V59.425z"
data-original="#000000" class="active-path" data-old_color="#000000"
fill="#ffffff" />
</g>
</svg>
</div>
<div class="accordion-heading">
<strong>
@if (Session::get('lang') == 'en')
{{ $question->question_en }}
@else
{{ $question->question_es }}
@endif
</strong>
</div>
<div data-is-ix2-target="1" class="accordion-icon" data-animation-type="lottie"
data-src="{{ asset('js/plus-to-x-white.json') }}" data-loop="0" data-direction="1"
data-autoplay="0" data-renderer="svg" data-default-duration="1" data-duration="0"
data-ix2-initial-state="0"></div>
</div>
<nav class="accordion-body w-dropdown-list dropdown-list-{{ $key }}"
style=" background-color: white !important; display:none;">
<div class="accordion-body-content">
@if (Session::get('lang') == 'en')
{!! $question->answer_en !!}
@else
{!! $question->answer_es !!}
@endif
</div>
</nav>
</div>
@endforeach
@endif
</div>
</div>
</section>
.accordion-heading-block {
width: 100%;
color: var(--white-smoke);
/* white-space: break-spaces; */
background-image: linear-gradient(
275deg,
#4450f2 0.45%,
rgb(80 90 217) 89.25%
);
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 50px;
font-size: 16px;
font-weight: 600;
display: flex;
min-height: 121px;
border-radius: 10px 10px 10px 10px !important;
}
.accordion-heading {
z-index: 2;
position: relative;
font-size: 16px;
}
.faq-section .accordion-heading strong {
text-wrap: wrap;
}
iPhone版 在此输入图片描述
笔记本电脑版 在此输入图片描述
尽管尝试了text-wrap：wrap；和空白：正常；在 .accordion-content 上，该问题在 iOS iPhone 上仍然存在。
试试这个！
overflow-wrap: break-word;
word-break: break-word;