Tailwind中文本换行后如何让宽度适配内容，保持箭头与文本固定间距

不需要使用JavaScript，纯CSS即可实现需求。你之前单独设置width: fit-content溢出、width: min-content强制换行的核心问题是没有匹配对应的最大宽度限制，修正方案如下：

方案1：调整现有标签属性 #

给文本p标签同时添加w-fit（对应width: fit-content）和最大宽度限制，最大宽度值按卡片内部可用空间计算即可（总宽度减去左侧图标宽度、预留边距总和），同时把flex容器的间距调整为你需要的10px：

<div class="grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]">
  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-[10px]">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <!-- 新增w-fit和max-w限制，max-w数值可根据实际需求调整 -->
    <p class="text-xl font-bold w-fit max-w-[calc(100%-110px)]">Software Solutions</p>
    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
    </svg>
  </div>

  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-[10px]">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <p class="text-xl font-bold w-fit max-w-[calc(100%-110px)]">Business process solutions</p>
    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
    </svg>
  </div>
</div>

调整后文本未超过最大宽度时会自动贴合实际内容宽度，超过后正常换行，始终和箭头保持10px间距。

方案2：伪元素挂载箭头（更稳定） #

如果不想手动计算最大宽度，可直接把箭头作为p标签的后置伪元素，箭头会自动跟随在文本末尾：

1. 先添加自定义CSS：

.text-with-arrow::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 10px;
  background: url('data:image/svg+xml;utf8,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="%23333940"/></svg>') no-repeat center;
}

2. 调整HTML结构，删掉单独的svg标签，给p加上对应类名：

<div class="grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]">
  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <p class="text-xl font-bold text-with-arrow">Software Solutions</p>
  </div>
  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <p class="text-xl font-bold text-with-arrow">Business process solutions</p>
  </div>
</div>

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