3

I have a horizontal list with ...-truncated titles which I want to be centered.

The centering works in Safari (top), but not in Chrome (bottom):

Safari (good):

Chrome (bad):

ul {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  width: calc(100% / 2);
  display: block;
}


div {
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;  
}
<ul>
  <li>
    <div>
      IIIIMMM
    </div>
  </li>
  <li>
    <div>
      MMMM
    </div>
  </li>
</ul>

Problem can be simplified as

div {
  text-align: center;
  width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
}
<div>a⸻b…</div>
<div>a⸻b⸻c</div>
<p>Both <code>div</code>s should be identical.</p>

Rendered outcome in Chrome and Firefox:

enter image description here

myf
  • 9,874
  • 2
  • 37
  • 49
Tonald Drump
  • 1,227
  • 1
  • 19
  • 32
  • Chrome might be thinking: if the content overflows and its truncating with '...' there is no centering, because the content is using the whole space - else it wouldn't be overflowing. hint: if you use 100% width on your div, the border is added to that, so your divs take more space than available. – Homungus Jul 03 '20 at 09:13
  • 1
    Interesting problem, FWIV it is probably a bug in Chromium (Blink) and Firefox (Gecko) implementations. I took the liberty and added simplified test-case and added Firefox as affected browser, I think it describes your problem slightly better than initial one; if you agree you can remove that one. – myf Jul 03 '20 at 09:48

0 Answers0