CSS Ellipsis – how to handle text overflow

Ever had that moment when your text just blows up the layout because it’s too long? You open the page, and suddenly a username or title stretches across the screen like it owns the place. That’s where CSS ellipsis comes to the rescue. It’s a small trick that tells the browser: if text doesn’t fit, cut it and show three dots. It looks clean, professional, and saves your layout from chaos.

CSS Ellipsis Overflow – how to make it work

To make CSS ellipsis work, you need a few properties together. The core one is text-overflow: ellipsis, but it won’t do anything on its own. You also need overflow: hidden to hide the extra text and white-space: nowrap to keep it all in one line. And yeah, don’t forget to set a width, otherwise the browser won’t know where to stop. A simple setup looks like this:

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Now your text stays on one line, and if it’s too long, it just ends with three dots. This is your go-to setup for single-line truncation. You’ll see it all over the place – tables, product cards, sidebar lists.

CSS Ellipsis Truncate – single line example

The single-line ellipsis is the most common use case. It’s light, works in all browsers, and keeps your UI consistent. Just remember – you need overflow, white-space, and text-overflow all together for it to actually work. Forget one, and you’ll be staring at overflowing text wondering what’s wrong.

CSS Ellipsis Multiline – cutting text after multiple lines

But what if you need to cut text after a few lines instead of just one? For example, in blog previews or comment blocks. text-overflow alone can’t handle that, so we use the webkit trick with -webkit-line-clamp. It lets you set how many lines you want to show, and hides the rest with ellipsis. Here’s how it looks:

.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

This setup limits the content to three lines and hides the rest. It’s not part of the official CSS standard yet, but it works in pretty much every modern browser. You don’t need JavaScript or extra libraries – just a few lines of CSS and you’re good.

CSS Ellipsis Not Working – why it fails and how to fix it

But sometimes ellipsis just refuses to work, and that can be annoying. The most common reason is missing one of the required properties. For a single-line truncate, if you forget either overflow: hidden, white-space: nowrap, or don’t set a width, ellipsis won’t show. Another common issue is using a display type that doesn’t play nice with text-overflow. If your element is display: inline, the browser won’t apply ellipsis. You need to switch it to display: block or inline-block.

Here’s an example that won’t work:

span {
  text-overflow: ellipsis;
  white-space: nowrap;
}

No width, no overflow, and span is inline – so nothing happens. Now here’s a fixed version:

span {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Sometimes flexbox layouts cause trouble too. If you use ellipsis inside a flex container, make sure the flex item has min-width: 0 or overflow: hidden, otherwise the text won’t get clipped.

Multiline ellipsis can also fail if you forget display: -webkit-box or set the wrong box orientation. Without -webkit-box-orient: vertical, the browser doesn’t know how to clamp the lines.

So yeah, when CSS ellipsis isn’t working, it’s almost always about missing or conflicting CSS rules. Check your display type, overflow, width, and line clamp setup. Once all those pieces are in place, ellipsis will do its job and your layout will stay clean and sharp.

CSS Ellipsis Show Full Text on Hover – make hidden text visible

Sometimes you want to hide long text with ellipsis, but still let users see the full content when they hover over it. That’s actually a super common pattern in dashboards, file lists, and admin panels. You keep things clean by default and show full text only when someone hovers. No JavaScript needed, just a few CSS tweaks.

The main idea is to use text-overflow: ellipsis for truncation and then switch styling on hover so the full text becomes visible. There are a few ways to do it – with a tooltip, expanding width, or just letting the text wrap normally. The simplest one is to remove overflow: hidden and white-space: nowrap when the element is hovered.

Here’s a small demo block you can drop straight into your WordPress post as custom HTML:

<div class="ellipsis-demo">
  <p class="ellipsis-demo__text">This is a very long text that normally gets truncated but shows in full when you hover over it.</p>
</div>
<style>
.ellipsis-demo {
  width: 250px;
  border: 1px solid #ccc;
  padding: 10px;
  font-family: sans-serif;
}
.ellipsis-demo__text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ellipsis-demo__text:hover {
  white-space: normal;
  overflow: visible;
  background: #f9f9f9;
}
</style>

In this example, the text is truncated by default, and when you hover, it expands to show the full line. The smooth transition makes it look cleaner. You can tweak this however you like – maybe add a tooltip, fade-in effect, or use a fixed height with scroll. But even this basic setup already gives you a neat user experience with zero JavaScript. Btw, here in the example there is 1px border, if you need to create fancy figures or buttons with hidden text feel free to use our Border Radius Generator.

CSS Ellipsis In Middle Of String – cutting text from the center

Sometimes you don’t want to hide text at the end but in the middle. A classic case is long file names or email addresses where the beginning and the end matter more than the middle. Sadly, CSS doesn’t have a native text-overflow: middle property. But there’s a simple workaround using flexbox and a bit of positioning magic.

The idea is to keep the start and end of the string visible while hiding the middle part with an ellipsis. You can do it by wrapping the text in two spans and cutting the center with overflow: hidden.

Here’s a demo you can drop right into your WordPress post:

<div class="ellipsis-middle-demo">
  <span class="ellipsis-middle-demo__text">very-long-filename-version-final-final-again.txt</span>
</div>
<style>
.ellipsis-middle-demo {
  width: 260px;
  border: 1px solid #ccc;
  padding: 10px;
  font-family: monospace;
}
.ellipsis-middle-demo__text {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis-middle-demo__text::before {
  content: "very-long-filename";
  flex-shrink: 0;
}
.ellipsis-middle-demo__text::after {
  content: ".txt";
  flex-shrink: 0;
  margin-left: auto;
}
</style>

This trick works well for known string patterns like filenames, IDs, or emails where you can split the text logically. It’s not fully dynamic, but visually it gets the job done and keeps both ends visible while cutting the middle part cleanly.

Tailwind CSS Ellipsis – how to use text overflow utilities

If you’re using Tailwind CSS, working with ellipsis is even easier. Tailwind has built-in utilities that map directly to text-overflow, white-space, and overflow CSS properties. No need to write custom classes — you just stack utilities right in your HTML and get the same result instantly.

You can read the full docs on Tailwind’s official site here:
https://tailwindcss.com/docs/text-overflow

Here’s a quick rundown of the most useful classes for handling text overflow and ellipsis in Tailwind:

Example usage:

<p class="w-48 truncate">
  This text is too long and will be truncated with an ellipsis.
</p>

For multiline truncation with Tailwind, you can use the line clamp plugin:

<p class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan dolor vel augue bibendum, sed tincidunt erat egestas.
</p>

So yeah, if you’re working with Tailwind CSS, you don’t need to mess with raw CSS. The built-in truncate and line-clamp classes handle almost every use case. It’s clean, fast, and super handy for responsive layouts where you need tight control over text overflow.