Search code examples
htmlcsstailwind-css

Text aligns to the right when using line-clamp-1

With this Tailwind CSS code:

<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>

When you use line-clamp-1, the text inside span aligns to the right:

enter image description here

If you remove line-clamp-1 and shorten the text, the text aligns to the left:

enter image description here

What could be the reason, and how to fix this inconsistency?

Tailwind Play

Solution

  • The parent <button> includes a class justify-between, which applies justify-content: space-between. This style will fill the flex container by inserting as much space between the children as possible.

    This is desired behavior since you want the arrow icons to remain on the right side of the container. However, if you want the text to remain centered, you can instead add flex-grow: 1 to the <span>. This will grow the <span> to fill the space instead.

    <span style="flex-grow:1">Congo,</span>

    Updated Tailwind Play

    On another note, adding flex-grow: 1 to the <span> makes the justify-between class superfluous and can be removed with no effects.

    See here: https://play.tailwindcss.com/gZsweXRC74