9

I'm using tailwind to create a card with an arrow. I want the arrow always next to the text 10px. But when the text is wrapped, the width of the text is larger than the actual width of the text.

enter image description here

I tried adding width: fit-content but the text will overflow and can't wrap. If I add width: min-content then the text always wraps.

I must use javascript to get the actually width of the text in this case, right?

Here is my code:

<div class="grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]">
  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <p class="text-xl font-bold">Software Solutions</p>
    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
    </svg>
  </div>

  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <p class="text-xl font-bold pr-0 w-[fit-content]">Business process solutions</p>
    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
    </svg>
  </div>
</div>
dungreact
  • 442
  • 1
  • 9
  • 22

1 Answers1

2

Edited

I don't think that this is possible with CSS alone.

See this answer for JS fix: https://stackoverflow.com/a/32222395/4536543

Here's my take on it:

// get list of all spans
list = document.querySelectorAll('.content span');
for (var i=0; i<list.length; i++) {
  // retrieve width of span and apply it to parent
  w = list[i].offsetWidth;
  list[i].parentNode.style.width = w+1+"px"; // need to add 1 because sometimes width is not a whole number and Browser sometimes rounds it down which will trigger layout shift
}
<div style="background: green; width: 134px; position: relative">
  <div class="content" style="background: yellow; float: left; max-width: 124px;">
    <span style="background: grey">
      somewhat long text goes here <!-- this is your "Business process solutions" -->
    </span>
  </div>
  <div style="background: red; width: 10px; display: inline">
    >
  </div> <!-- this is your arrow -->
</div>
Maxim Mazurok
  • 3,856
  • 2
  • 22
  • 37