Web Platform Team Blog

Making the web awesome

How I Came To Care About Ellipsis

The Adobe Web Platform Team has some features and specifications that we focus on implementing in WebKit, but we also like to contribute to the quality of the project as a whole. To this end, we often work on bug fixes for things that are not related to one of our features. Not only is this a good way to contribute to the project in a more general way, it also is an excellent way to get broader experience with the code.

As part of these efforts, I recently fixed Bug 101879. This bug was filed by a user who discovered that WebKit didn’t correctly implement the CSS 3 UI text-overflow property when a block contained a mixture of inline content and block content. Specifically, it fails to render one of the examples from the specification properly:

Incorrect rendering of spec example

The correct rendering is as follows:

Correct rendering of example

If you want to know how your browser fares, you can go to the text-overflow section of the specification and scroll down a little to find the table with this example and others.

It turns out this happens because a block element can only contain either all inline content or all block content, so when the block contains both inline and block content, WebKit creates anonymous blocks to contain the inline content. (Anonymous block creation is explained in Section Anonymous block boxes of the CSS 2.1 spec) Since the value of the text-overflow property is not inherited by child blocks by default, it was getting lost when laying out the text in the anonymous blocks. I changed the code to check for a block parent that has text-overflow set when laying out the content in an anonymous block, and use that value to determine if the inline content overflow in the anonymous block should get an ellipsis or not.

So that’s the short story of this one bug. If you’ve been having some issues with ellipsis in WebKit, this is good news for you. If you have some other bug that’s been bothering you, perhaps you should take a look at the code: you might find it easier than you expect to get started and fix a bug. If you think that sounds interesting, you should check out my post on Getting Started with the WebKit Layout Code.


  1. March 17, 2013 at 12:21 am, Binyamin said:

    I just open related issue, seems like currently Opera 12.14 seems the only browser handling it correctly.

    • March 17, 2013 at 8:32 pm, Bem Jones-Bey said:

      Interesting. If no one gets to it before me, I’ll take a look at the webkit bug when I get a chance. Thanks!