Question 272768 in Html Question posted in
Some basic documentation can be found here.

Html – How to align center a row with a text that wraps using TailwindCSS?

I have a problem using TailwindCSS to align center some elements in a flex-row as soon as the text in the row item starts to get longer and wrap.

Here is my current implementation:

<div class="border-1 p-2 flex w-[250px] flex-col items-center rounded border border-solid border-gray-300">
  <div class="flex flex-row">
    <div>UUID</div>
    <div class="ml-2">
      Text
    </div>
  </div>
  <div class="mt-2">
    2023-10-23
  </div>
</div>

It displays as I want if the text does not wrap:

enter image description here

https://play.tailwindcss.com/UEGaldW7eo

However when the text get’s bigger and starts to wrap, then the row (UUID + text) is no longer center aligned.

enter image description here

What I’d like is that:

enter image description here
enter image description here

But I can’t make it work somehow.

Any idea?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution was to set "w-min" to the div that contains the text so that wenn the text starts wrapping its div width shrinks to a minimum width.

    <div class="border-1 p-2 flex w-[250px] flex-col items-center rounded border border-solid border-gray-300">
  <div class="flex flex-row">
    <div>UUID</div>
    <div class="ml-2 w-min">MyTextThat wrapsOnTwoLines</div>
  </div>
  <div class="mt-2">2023-10-23</div>
</div>

    Which produces:

    enter image description here


  2. 0

    The probable issue is due to the line-break that in utrn breaks flex-alignment. I used items-center and text-start classes to try to achieve the layout that you’re expecting. Something like:

    <div class="flex flex-col items-center text-start">
    <div class="flex flex-row items-start justify-center">
      <div class="pl-4">UUID</div>
      <div class="ml-2">
        Text that is long enough to wrap on 2 lines and more
      </div>
    </div>
  </div>

    CODE DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search