2

I want the result to be like this

enter image description here

but this is what i get

enter image description here

with my svelte code:


<div
  style="background-image: url('{unsplash?.url}');"
  class="bg-black flex items-center justify-center min-h-screen bg-cover"
>
  <Authenticate />

<!-- here is my div -->

  <div class="block flex absolute bottom-9 left-5 h-16 w-16">
    <img src={unsplash?.author.avatar} alt={unsplash?.author.username} class="rounded-full" />
    <p class="inline-block text-blank ml-2">
      By <a class="inline-block" target="__blank" href={unsplash?.author.url}
        >{unsplash?.author.username}</a
      >
    </p>
    <p class="inline-block text-black">
      Find similar pictures on <a class="inline-block" target="__blank" href="http://unsplash.com"
        >Unsplash</a
      >
    </p>
  </div>
</div>

i used inline-block, but doesn't work

Michael-Liendo
  • 81
  • 3
  • 9
  • `inline-block` has nothing to do with internal wrapping, though it enforces a box around the content. For an explanation what `inline-block` is about see [this question](https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block). To prevent wrapping you need to set `white-space: nowrap` or similar; don't know what the respective Tailwind class for that is... – H.B. Apr 16 '22 at 18:22
  • yeah, it worked, thanks. but i have a problem https://imgur.com/loJuRxo I want "Find similar pictures on Unsplash" this one below – Michael-Liendo Apr 16 '22 at 18:43
  • Then don't use `inline-block` on the `p` elements, that puts the elements in text flow mode, `p` should stack on top of each other by default (they are block elements). – H.B. Apr 17 '22 at 03:40

2 Answers2

3

You probably want Whitespace exactly whitespace-nowrap which is white-space: nowrap; Although you may look at Word break and Text overflow

Andrey Kudriavtsev
  • 1,124
  • 11
  • 19
1

give more width in parent div from w-16 to w-[90%]

mo7med
  • 26
  • 5
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 18 '22 at 18:27