css Question posted in
Some basic documentation can be found here.

How to add "three dots" (ellipsis) in Tailwind CSS?

I am working on a project where I need to display text in a container. The text can sometimes be long, and I want it to be truncated with an ellipsis ("…") at the end when it overflows the container. I’m using Tailwind CSS for my styling, and I am unsure about the correct approach to implement the "three dots" effect on text that overflows. I’ve tried applying the text-overflow, overflow, and white-space properties manually in CSS, but I want to know how to achieve this effect using Tailwind CSS.

I expect that by applying the appropriate Tailwind classes, the text will be truncated properly with an ellipsis when it overflows the container’s boundaries.

Here’s a basic example of what I’ve attempted:

<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 200px;">
  This is a long text that will be truncated with an ellipsis.
</div>

But I’d like to know if there’s a cleaner way to implement this using Tailwind’s utility classes.

I tried manually applying the following styles to a div element to truncate the text and add the ellipsis effect when it overflows:

<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 200px;">
  This is a long text that will be truncated with an ellipsis.
</div>

I expected this to work as I have seen these CSS properties used together in standard CSS to create the ellipsis effect. However, I would prefer a more Tailwind CSS-centric solution using its utility classes.

Tags:

3

Answers


  1. 0

    You can achieve the "three dots" (ellipsis) effect in Tailwind CSS using the truncate utility class, which combines the necessary styles (overflow: hidden; text-overflow: ellipsis; white-space: nowrap) to truncate the text and add an ellipsis when the text overflows its container.

    Here’s the correct Tailwind CSS implementation:

    <div class="w-48 truncate">
  This is a very long text that will be truncated with three dots.
</div>
    • w-48: This class sets a specific width for the container. You can adjust the width based on your requirements (e.g., w-64, w-full, etc.).
    • truncate: This class applies the following styles to the element:
    • overflow: hidden: Hides any overflowed content.
    • text-overflow: ellipsis: Adds the ellipsis (…) when the text overflows.
    • white-space: nowrap: Prevents the text from wrapping onto multiple lines.

    By using this combination of classes, you don’t need to manually write the CSS properties, and it makes your code cleaner and more maintainable.

    Login or Signup to reply.
  2. 0

    You can use a custom width with Tailwind’s arbitrary value syntax:

    <div class="truncate w-[200px]">
  This is a long text that will be truncated with an ellipsis.
</div>
    Login or Signup to reply.
  3. 0

    In tailwindcss you can apply the width to the element with .truncate class.

    https://play.tailwindcss.com/BGWy5P6AIb

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search