How to put my text in a single line in tailwind css?

Question

I want the result to be like this

but this is what i get

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

Semitics

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. To prevent wrapping you need to set white-space: nowrap or similar; don't know what the respective Tailwind class for that is... – Semblance

yeah, it worked, thanks. but i have a problem imgur.com/loJuRxo I want "Find similar pictures on Unsplash" this one below – Semitics

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). – Semblance

Answer 1

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

Pauly

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. – Higgledypiggledy

Answer 2

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

Aplasia