使用line-clamp-1时文本右对齐的异常问题排查及修复

问题描述 #

使用以下Tailwind代码构建表单行时，出现布局对齐不一致的问题：

<div class="grid w-[500px] gap-4 grid-cols-2">
  <div class="space-y-2">
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":re:-form-item">Country</label>
    <button class="inline-flex items-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border text-foreground hover:bg-subtle shadow-sm h-10 px-4 py-2 w-full justify-between whitespace-normal" role="combobox" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:rf:" data-state="closed">
      <span class="line-clamp-1">Congo, The Democratic Republic of the</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down ml-2 h-4 w-4 shrink-0 opacity-50">
        <path d="m7 15 5 5 5-5"></path>
        <path d="m7 9 5-5 5 5"></path>
      </svg>
    </button>
  </div>
  <div class="space-y-2">
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":rg:-form-item">Website</label>
    <input class="flex h-10 shadow-sm xl:max-w-screen-sm rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full" id=":rg:-form-item" aria-describedby=":rg:-form-item-description" aria-invalid="false" type="text" value="https://www.tsmc.com/" name="website">
  </div>
</div>

• 当<span>添加line-clamp-1类时，长文本截断后视觉上呈现向右对齐的效果；
• 移除line-clamp-1并缩短文本后，文本向左对齐，两种状态布局不一致。

原因分析 #

• line-clamp-1类的核心样式包含display: -webkit-box，这会将原本默认是行内元素的<span>转换为块级弹性盒元素；
• 父按钮采用inline-flex justify-between布局，右侧SVG图标设置了shrink-0（固定宽度不收缩）：
  • 无line-clamp-1时，<span>是行内元素，宽度仅由文本内容决定，短文本自然靠左排列；
  • 添加line-clamp-1后，<span>变成-webkit-box元素，会自动填充按钮内的剩余空间，此时文本虽为左对齐，但元素占满左侧可用宽度，截断后的文本右侧留下大量空白，视觉上看起来像“向右对齐”，和短文本布局产生差异。

修复方案 #

方案1：强制文本左对齐并填充空间（推荐） #

给带line-clamp-1的<span>添加flex-1 text-left类，确保无论文本长短，<span>都填充按钮左侧剩余空间，且文本始终保持左对齐：

<span class="line-clamp-1 flex-1 text-left">Congo, The Democratic Republic of the</span>

方案2：统一元素的display属性 #

无论是否需要截断文本，都给<span>设置一致的display属性（比如inline-block），让短文本时也填充对应空间，保持布局统一：

<!-- 短文本场景 -->
<span class="inline-block">Congo</span>
<!-- 长文本截断场景 -->
<span class="line-clamp-1 inline-block">Congo, The Democratic Republic of the</span>

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