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!! 💛
Top comments (0)