Search code examples
htmlcssellipsis

`text-overflow: ellipsis;` behaves different in <a> than in <p>

I have a text like this:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Usually text-overflow: ellipsis; puts the ... at the end of a text line like this:

Lorem ipsum dolor sit amet, consetetur sadipscing elit...

But in my case the viewed text is this:

Lore... dolore magna aliquyam erat, sed diam voluptua.

When i use this CSS:

p, a {
  max-width: 400px;

  overflow: hidden;
  text-overflow: ellipsis;

  display: block;
  display: -webkit-box;

  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  font-weight: normal;
  font-family: "Arial", sans-serif;
  text-decoration: none;
}

I rebuild it in a CodePen (http://codepen.io/DerZyklop/pen/cDKFh) and figured out, that the ellipsis ellipsis behaves differently in <a> than in a <p>. With the newest version of Chrome i see this result from my CodePen:

https://i.sstatic.net/wCQoO.png

Any idea why this is happening?

Solution

  • Though I'm not completely sure why, I do have a solution.

    I think that because p by standard is a block element, and a an inline element, the way overflow: ellipsis is handled differs.

    To solve this, just add white-space: nowrap;, causing the text to remain on 1 line. Using webkit-only css is bound to give problems in other browsers.

    p, a {
  max-width: 400px;

  overflow: hidden;
  text-overflow: ellipsis;

  display: block;

  white-space: nowrap;

  font-weight: normal;
  font-family: "Arial", sans-serif;
  text-decoration: none;
}

    Edit: After looking into it a bit more, I've found out why it differs in the first place. Text-overflow works when the text overflows it's container (hence the name). Only a block element can have a set width and height, making only block-elements susceptible to any form of overflowing.

    This is why it will work the same on both elements when they get a display block (so that they're both block elements, which an a element isn't by default), and they get their width and height set. In this case the height isn't set, but due to the white-space: nowrap; the element knows it shouldn't go to the next line, and all text overflows on the right, since it can't go to a new line.

    In addition to that, and quoting @Gareth (see the comments under my answer, and his own answer):

    "why it's happening" is because you're using a property display: -webkit-box that doesn't have any fixed behaviour. There's no documentation on it because it's from an old specification and it's not a property that's supposed to be used.