Positioned spans being clipped in Chrome

Question

I'm trying to position a label above inline sections containing a set of spans, but I'm finding that Chrome appears to be clipping the labels weirdly. Take a look at these two screenshots:

In Firefox:

In Chrome:

If you look at the screenshot from Chrome, you can see the labels are being clipped based on the start point of the next label. The desired result would be the same as the Firefox screenshot, where the labels go all the way up to the end of the line.

Here is the code used for these two examples:

.section {
  position: relative;
  border-right: solid 1px #000;
}
.section-title {
  display: inline-block;
  position: absolute;
  top: -10px;
  left: 5px;
  right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: sans-serif;
  font-size: 0.8em;
}
.pieces {
  font-family: monospace;
}
.pieces span {
  display: inline-block;
  padding: 10px 5px 0 5px;
}

<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>

Is this a known Chrome/WebKit bug? Is it possible to fix without drastically modifying the HTML?

Answer 1

It's not a bug in Chrome... it's a problem with the code, which Chrome interpreted in a way that it deemed logical.

Firstly, note that your .section-title is absolutely positioned and set with both left and right. This means:

1. It automatically becomes display:block.
2. It tries to be 5px from left, and 5px from right boundary of the parent.

Then, note that your parent .section is an inline element, since all span tags are inline by default. Therefore, it takes the width that it requires to accommodate its children. Your long line of 00 overflows to the next row, and hence the "right boundary" also overflows to the next row.

Being an obedient element, .section-title tries its best to stay 5px away from that right border, which is now very much nearer. Hence, the text-overflow: ellipsis correctly kicks in.

To fix your code:

1. Having display: inline-block for an absolutely positioned element is useless. It confuses. Take it out.
2. Don't set it to right:5px. Take it out. (this is the only fix that matters, actually).
3. Please do feedback to the author who wrote this HTML that the HTML vocabulary is more than just <span>. It's ridiculous to use only <span> for everything when more logical tags like <section>, <h1>-<h6> will fit the content better.