0

I have some really simple markup, even without any CSS. But the whitespace around the dash is rendered differently in Firefox and Chrome.

This is the content:

Time Period: 2019-11-19, 00:00:00 - 00:00:00

Firefox moves the dash to left, Chrome puts it right in the middle between the text.

Edit

This is the HTML:

<div class="some-hint"> 
        <span>Time Period:</span>
        <span class="bold">2019-11-19, 00:00:00</span>&nbsp;-&nbsp;<wbr>
        <span class="bold">00:00:00</span>


</div>

Apart from the comment from Andrew Morton: I have noticed, that both browsers moves the dash to the left, when the <wbr> is removed.

You can compare it here: https://jsfiddle.net/bair_web/Lsmwz4k6/

Firefox version 70, Chrome version 78, Linux (KDE) based.

I've scanned the documentation for <wbr> and related stuff, I've tried to add some padding to the left hand side <span>, but I did not found a good solution for both browsers (not to mention Edget and IE11). Which CSS can I use or how would I need to change the HTML for getting the same result on the screen? Has anyone seen something similar?

Andrew Morton
  • 24,203
  • 9
  • 60
  • 84
BairDev
  • 2,865
  • 4
  • 27
  • 50
  • 1
    If you take out the newline after the `` it keeps the visible gaps equal. [Why does the browser renders a newline as space?](https://stackoverflow.com/q/588356/1115360) – Andrew Morton Nov 21 '19 at 14:41
  • Chrome is regarding `` as collapsible whitespace and the other browsers are not. The solution to make them all appear the same is to not put whitespace after that tag. – Andrew Morton Nov 21 '19 at 15:27
  • @AndrewMorton do you know any resources, which deal with this behavior of Chrome? – BairDev Nov 22 '19 at 13:15
  • The "Notes" at [MDN - wbr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) say "On UTF-8 encoded pages, `` behaves like the U+200B ZERO-WIDTH SPACE code point," so you could read [www.w3.org/TR/css-text-3/#white-space-processing](https://www.w3.org/TR/css-text-3/#white-space-processing) and figure out if Chrome has it wrong or everybody else. – Andrew Morton Nov 22 '19 at 13:28

0 Answers0