Tailwind CSS tutorial #30: Text Overflow

In the article, we will go into detail on how to use Text Overflow.

Text Overflow

Format

text-overflow-{ellipsis|clip}

Tailwind Class	CSS Property
truncate	overflow: hidden,text-overflow: ellipsis,,white-space: nowrap;
text-ellipsis	text-overflow: ellipsis;
text-clip	text-overflow: clip;

Basic usage

Truncate

Use truncateto truncate overflowing text with an ellipsis (…) if needed.

Ellipsis

Use text-ellipsis to truncate overflowing text with an ellipsis (…) if needed.

Clip

Use text-clip to truncate the text at the limit of the content area.

Code

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <p class="truncate w-96 bg-yellow-200 text-md p-4">Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville and the lives of its inhabitants. He's been at the forefront of many inventions, but has a special affinity for improving the world through alternative energy and green-living. Fred's engineering collaborations with the City of Binaryville have helped the city reduce its energy consumption year over year, and he's twice been awarded the highly coveted Binaryville Medallion of Honor.</p>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">truncate</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <p class="overflow-ellipsis overflow-hidden w-96 p-4 bg-yellow-200 text-md">
      Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville. He's twice been awarded the highly coveted BinaryvilleMedallionOfHonorAndExcellentAward</p>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">overflow-ellipsis</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <p class="overflow-clip overflow-hidden w-96 p-4 bg-yellow-200 text-md">
      Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville. He's twice been awarded the highly coveted BinaryvilleMedallionOfHonorAndExcellentAward</p>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">overflow-clip</div>
  </li>
</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Flex Direction, Hackathons and Flex Wrap.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! 💛