html - Positioned spans being clipped in Chrome -

i'm trying position label above inline sections containing set of spans, i'm finding chrome appears clipping labels weirdly. take @ these 2 screenshots:

in firefox:

in chrome:

if @ screenshot chrome, can see labels being clipped based on start point of next label. desired result same firefox screenshot, labels go way end of line.

here code used these 2 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 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 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 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 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 known chrome/webkit bug? possible fix without drastically modifying html?

it's not bug in chrome... it's problem code, chrome interpreted in way deemed logical.

firstly, note .section-title absolutely positioned , set both left , right. means:

1. it automatically becomes display:block.
2. it tries 5px left, , 5px right boundary of parent.

then, note parent .section inline element, since span tags inline default. therefore, takes width requires accommodate children. long line of 00 overflows next row, , hence "right boundary" overflows next row.

being obedient element, .section-title tries best stay 5px away right border, nearer. hence, text-overflow: ellipsis correctly kicks in.

to fix code:

1. having display: inline-block absolutely positioned element useless. confuses. take out.
2. don't set right:5px. take out. (this fix matters, actually).
3. please feedback author wrote html html vocabulary more <span>. it's ridiculous use <span> when more logical tags <section>, <h1>-<h6> fit content better.