Tailwind CSS tutorial #30: Text Overflow
Published: 2022-12-08 09:52:09

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 `truncate `to 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**
```html
<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 ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Text%20Overflow.html)link.

**Overall Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agre6vl1mbu3h0xlbv1d.png)


**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛