tailwind1-2  Exercise 3: Truncation, and the Class That Makes It Work
=====================================================================

<div id="row" class="flex w-48 gap-2">
  <div id="titlewrap" class="min-w-0 flex-1">
    <p id="ttl" class="truncate">A very long product name that will not fit in the box</p>
  </div>
  <span id="price" class="shrink-0">£9.99</span>
</div>

<p id="desc" class="w-48 line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

What each class does:

  flex w-48 gap-2   a 192px row (w-48 = 12rem) with 8px between the title and the price
  flex-1            the title wrapper takes all the space the price leaves
  min-w-0           lets that wrapper become narrower than its text (the class to remove)
  truncate          overflow: hidden; text-overflow: ellipsis; white-space: nowrap  -> one line and an ellipsis
  shrink-0          the price is never squeezed
  line-clamp-3      the description shows three lines and an ellipsis

Measured in headless Chrome (widths in px):

  with min-w-0:     title paragraph 146   wrapper 146   price 38   row 192   (146 + 8 + 38 = 192; ellipsis shown)
  without min-w-0:  title paragraph 366   wrapper 366   price 38   row 192   (scrollWidth of the row: 412, so the row overflows)
  description:      72px tall, which is 3 lines of 24px (the same paragraph without line-clamp-3 was 240px tall, 10 lines)

(The price is 38px wide in the default system font; another font gives a slightly different number.)

WHY THIS WORKS AS AN ANSWER
---------------------------
A flex child will not shrink below the width of its content unless you say it may: its minimum width is "auto", which means its content. The wrapper holds
a paragraph whose text is 366px wide on one line, so without min-w-0 the wrapper stays 366px, inside a 192px row. The paragraph inside is therefore also 366px,
there is nothing for truncate to cut, and the row's content is 366 + 8 + 38 = 412px in a 192px row, so it overflows. Adding min-w-0 sets min-width: 0, so the
flex-1 wrapper can take only the 146px that remain, and then the paragraph really is narrower than its text and truncate shows the ellipsis.
Putting truncate directly on the flex item (no wrapper) also worked in the earlier test in the chapter (192px), because an element with overflow hidden already
has a flexible minimum width; the wrapper, which has overflow visible, is what causes the trouble. The rule: every element between the flex container and the
truncating text, other than the text itself, needs min-w-0. line-clamp-3 has no such problem: the paragraph has a fixed width (w-48), so three lines of it are
always 72px.