A minimal working example of text ellipsis

The example is in Tailwind:

<div class="w-[200px]">
  <div class="w-full">
    <ul class="w-full">
      <li class="w-full">
        <a href="overflow-hidden text-ellipsis whitespace-nowrap">text</a>
      </li>
    </div>
  </div>
</div>

Interestingly, removing any w-full will cause the text ellipsis to fail. If we inspect it, we'll see that a child without w-full will extend beyond the parent.

I've made text ellipsis many times but I never remembered how to make it correctly. Hence, the blog is written for its minimal working form.