Search code examples
cssgoogle-chromefirefoxcross-browsermicrosoft-edge

Chrome/Edge and Firefox wrap long hyperlinks differently. Why?

I have noticed that Chrome/Edge and Firefox wrap long hyperlinks differently. Firefox breaks them on the slash / character, whereas Chrome/Edge doesn't consider the slash / character special.

Is there some description about this behavior? That is:

  • Why is it different?
  • Which one is really correct?

div {
  background: silver;
  font-family: 'Courier New';
  font-size: 16px;
  max-width: 18ch; width: min-content;
}

a.bare {
  overflow-wrap: break-word;
}
<div>
  <p>see <a href="..." class="bare">
  http://site.web/section/paaaaaaaaaaaaaaaaaaaaage.html</a></p>
</div>

overflow-wrap: break-word:

Firefox:

enter image description here

Chrome and Edge:

enter image description here

overflow-wrap: initial /* normal */:

Firefox:

enter image description here

Chrome and Edge:

enter image description here

Solution

  • What you're looking for is the line-break property. It specifies what characters are allowed to have line-breaks and which do not, but it's not precise. To summarize it gives some specific rules for certain characters in certain languages, but it does not specify the situation that you have asked about. It doesn't specify anything about the slash character. So since the CSS standard doesn't specify what is right, neither of these implementations are wrong.

    The default value for the line-break property is auto which does the following:

    The UA determines the set of line-breaking restrictions to use, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines.

    There is another standard, the unicode line breaking algorithm, which is far more specific and it includes a little thing which says that slashes should provide a line breaking opportunity after them for the exact situation you have inquired about. URLs being as frequent as they are on the web, it makes sense to be able to do line breaks in them at slashes, and so it's in that standard.

    According to the firefox source code as best as I could find, it says it follows that unicode standard, but that's not what it appears to be doing according to your example, instead the slash in firefox seems to provide a line breaking opportunity before it. Maybe someone with more in depth knowledge of the firefox source code could explain why it does that?

    I'm not sure about the chrome line breaking algorithm because it's a lot more difficult to search the source code, but I imagine the developers decided that the '/' character doesn't deserve a line break under those circumstances based on the broad definition of 'auto' in the css spec.