6 replies

Can't figure out how to wrap text under an image

Basically, what I want to achieve is this (1st image):
https://prnt.sc/EO_CIn76U9UT

The closest I can get to my desired result is with flex - which results in this (2nd image):
https://prnt.sc/kyvUnM2vIww4

Source to my closest result:

<div className="flex">
  <Avatar className="h-6 w-6">
    <AvatarImage src="https://github.com/shadcn.png"/>
    <AvatarFallback>ABC</AvatarFallback>
  </Avatar>
  <span className="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, laudantium? Excepturi iure corrupti adipisci debitis, laborum ad quae magni? Lorem ipsum dolor sit amet.
  </span>
</div>

<div className="flex">
  <Avatar className="h-6 w-6">
    <AvatarImage src="https://github.com/shadcn.png"/>
    <AvatarFallback>ABC</AvatarFallback>
  </Avatar>
  <span className="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, laudantium? Excepturi iure corrupti adipisci debitis, laborum ad quae magni? Lorem ipsum dolor sit amet.
  </span>
</div>

<div className="flex">
  <Avatar className="h-6 w-6">
    <AvatarImage src="https://github.com/shadcn.png"/>
    <AvatarFallback>ABC</AvatarFallback>
  </Avatar>
  <span className="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, laudantium? Excepturi iure corrupti adipisci debitis, laborum ad quae magni? Lorem ipsum dolor sit amet.
  </span>
</div>

<div className="flex">
  <Avatar className="h-6 w-6">
    <AvatarImage src="https://github.com/shadcn.png"/>
    <AvatarFallback>ABC</AvatarFallback>
  </Avatar>
  <span className="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, laudantium? Excepturi iure corrupti adipisci debitis, laborum ad quae magni? Lorem ipsum dolor sit amet.
  </span>
</div>

Any help is appreciated! :)

Lightshot

Screenshot

Captured with Lightshot

Lightshot

Screenshot

Captured with Lightshot

Can't figure out how to wrap text under an image

Similar Threads

Similar Threads

Similar Threads