Tailwind在Safari 16.5及以下版本文本换行失效求助

在Safari 16.5及以下版本中，text-wrap属性无法实现正常文本换行（Safari 17.4+及其他浏览器表现正常）。以下是基于Phoenix LiveView + Elixir + Tailwind的代码，文本溢出容器未自动换行：

<div style={@card_background} class={"#{@class} w-40 h-40 md:w-60 md:h-60 lg:w-80 lg:h-80 rounded-2xl grid grid-cols-1 text-white bg-cover bg-no-repeat bg-[center_center]"}>
    <div :if={@verticals !== []} class="mt-0.5 sm:ml-0.5 flex h-fit flex-col xl:flex-row">
        <%= for vertical <- @verticals do %>
            <span class="mr-1 mb-[5px] flex items-center justify-center bg-white rounded-full text-navy text-xs md:text-sm font-medium w-fit px-0.4">
                <%= vertical.title %>
            </span>
        <% end %>
    </div>
    <div class="text-wrap self-end flex flex-col justify-end outline-none cursor-pointer ignore-sanity-formatting">
        <div class="sm:line-clamp-3 text-sm md:text-xl rounded-b-2xl font-medium font-graphik bg-gray-darkerBlue backdrop-blur-xl bg-opacity-40 px-0.5 md:px-1.5 pt-0.25 lg:pt-0.75 md:min-h-[7rem] min-h-[4rem] hover:brightness-125">
            <div class="flare-text mt-0.25 sm:mt-0 h-2.75 sm:h-4 md:leading-6 line-clamp-3 md:line-clamp-none">
                <%= @title %> text aint wrapping text aint wrapping
            </div>
            <div :if={@progress}>
                <div class="project-progress sm:mt-1 w-full flex items-center gap-x-1 relative">
                    <div class="w-full h-0.5 grow rounded-full bg-white/20 backdrop-blur-sm overflow-hidden mx-0.5 md:mx-0">
                        <div class="project-progress-bar-inner absolute left-0 h-0.5 w-0 rounded-r-full transition-[width] bg-green-onPace" style={"width: #{@progress}%"}></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

text-wrap是CSS较新属性，Safari 16.5及以下版本不支持该属性，需用兼容性更好的传统属性降级处理：

• 替换text-wrap类：
  将包含text-wrap的div类名修改为whitespace-normal break-words self-end flex flex-col justify-end outline-none cursor-pointer ignore-sanity-formatting。其中：

  • whitespace-normal：遵循默认换行规则，文本在容器边界自动换行
  • break-words：当单词长度超出容器宽度时，强制拆分单词换行，避免溢出

• 额外检查项：

  1. 确保文本父容器未设置whitespace-nowrap、overflow-x-auto等阻止换行的属性
  2. 检查.flare-text的固定高度（h-2.75 sm:h-4）是否会截断换行后的内容，若有问题可改为min-h-*或结合line-clamp调整行数限制

• Safari兜底处理（若上述方案无效）：
  添加自定义CSS兼容旧版Safari：

  .ignore-sanity-formatting {
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
  }
  

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