Prevent vertical overflow with CSS

Question

I use this code:

.truncated-filename {
    max-width: 100px;
    text-overflow: ellipsis;
}

To prevent filenames from being too long for the box. However, there seems to be a vertical overflow issue. How can I make it so it just puts the dots on the top line?

You can use white-space: nowrap; to make the text follow a single line — Akhil
– Akhil, Commented Dec 3, 2015 at 2:23
looks something like this .truncated-filename { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } — Akhil
– Akhil, Commented Dec 3, 2015 at 2:30
Ellipsis requirements and limitations: stackoverflow.com/a/33061059/3597276 — Michael Benjamin
– Michael Benjamin, Commented Dec 3, 2015 at 3:15

Josh Crozier · Accepted Answer · 2015-12-03 03:23:43Z

3

It looks like you need to add overflow: hidden and white-space: nowrap.

The text won't be truncated unless it doesn't wrap, which is why you needed white-space: nowrap and an overflow value other than visible.

.truncated-filename {
  border: 1px solid;
  display: inline-block;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<span class="truncated-filename">10128-teach-vector.png</span>

edited Dec 3, 2015 at 3:23

answered Dec 3, 2015 at 2:14

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Benjamin Over a year ago

...according to MDN, text-overflow: ellipsis only works with overflow: hidden.. You may want to revise that. MDN only suggests it as an example. And text-overflow: ellipsis will work as long as overflow is other than visible... jsfiddle.net/9t2w7yex/2 ... In case you're interested, I have a full answer here.

Collectives™ on Stack Overflow

Prevent vertical overflow with CSS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related