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, Dec 03 '15 at 02:23
looks something like this `.truncated-filename { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }` — Akhil, Dec 03 '15 at 02:30
Ellipsis requirements and limitations: http://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Dec 03 '15 at 03:15

Josh Crozier · Accepted Answer · 2015-12-03T03:23:43.663

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 03 '15 at 03:23

answered Dec 03 '15 at 02:14

Josh Crozier

233,099
56
391
304

*...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`... http://jsfiddle.net/9t2w7yex/2/ ... In case you're interested, I have a full answer [**here**](http://stackoverflow.com/a/33061059/3597276). – Michael Benjamin Dec 03 '15 at 03:20

Prevent vertical overflow with CSS

1 Answers1