CODEWITHSUNDEEP
htmlcsstailwind-css
question asker
question asker

Reputation: 31

How to make a text title where certain letters span two lines

I can't figure out how to make this in regular css or tailwind, any help appreciated, tried using a grid but couldn't make it compact enough, example below. Example of what it should look like.

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-2/3 grid grid-rows-2 grid-flow-col justify-center gap-y-0 self-center">
  <h1 class="text-[256px] font-bold font-mono flex md:text-light-blue row-span-2">PR</h1>
  <h1 class="text-[90px] font-bold font-mono flex md:text-light-blue items-end p-0">ESIDENT</h1>
  <h1 class="text-[90px] font-bold font-mono flex md:text-light-blue items-start p-0">IZE</h1>
</div>

enter image description here

enter image description here

Upvotes: 3

Views: 656

Answers (3)

ChenBr
ChenBr

Reputation: 2652

Instead of using grid, I tried creating it with a mix of flex and absolute positioning. If you want to have a different font size you might need to tweak the absolute positions:

<div class="flex">
  <div class="text-[256px] font-bold">PR</div>
  <div class="relative">
    <div class="absolute top-20 text-[104px] font-bold">ESIDENT</div>
    <div class="absolute top-44 text-[104px] font-bold">IZE</div>
  </div>
</div>

first text

The idea is to use flex in order to position both parts of the header next to each other. Then we position the second part of the header to fit the first part with absolute positioning (top-20 and top-44).

Tailwind-play

If you want to stretch your text you might want to use the Scale utility:

<div class="flex">
  <div class="text-[256px] font-bold test scale-y-150">PR</div>
  <div class="relative">
    <div class="absolute top-[4rem] text-[104px] font-bold scale-y-[170%]">ESIDENT</div>
    <div class="absolute top-[12.5rem] text-[104px] font-bold scale-y-[170%]">IZE</div>
  </div>
</div>

second text

Tailwind-play

Upvotes: 1

Eimen
Eimen

Reputation: 21

I adjusted the line height and size of the smaller h1 and achieved the desired result.

<div className="w-2/3 grid grid-rows-2 grid-flow-col justify-center gap-y-0 self-center">
<h1 className="text-[256px] font-bold font-mono flex md:text-light-blue row-span-2"> PR</h1>
<h1 className="text-[115px] font-bold font-mono flex leading-[6rem] md:text-light-blue items-end p-0">ESIDENT</h1>
<h1 className="text-[115px] font-bold font-mono leading-[6.25rem] flex md:text-light-blue items-start p-0">IZE</h1>
</div>

enter image description here

Upvotes: 1

Rizeen
Rizeen

Reputation: 1344

Try this:

.main_div {
  display: flex;
align-items: center;
}

.main_div p {
  margin: 0;
}
<div class="main_div">
  <h1>PR</h1>
  <h5><p>ESIDENT</p><p>IZE</p></h5>
</div>

Upvotes: 0

Related Questions