1391440 - Don't allow line-wrap between the external-link icon and the link text

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Design, enhancement, P5)

Description

[Eric Shepherd [:sheppy]]

Attachment: Example of wrap between icon and text

Currently, line wrapping when rendering the site allows the line to wrap between the external-link icon and the link's text. This shouldn't happen.

See the attached screenshot for an example taken from https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism (it's up to you to adjust your width until it wraps).

Screenshot:

https://screenshots.firefox.com/jew3SKOddjyBUutL/developer.mozilla.org

Comment 1

[Eric Shepherd [:sheppy]]

This looks like the "external" class should be using white-space: pre-wrap instead of white-space: pre-line as it currently does. In my experimentation, that seems to clear it up. Does that seem right?

Comment 2

[Schalk Neethling [:espressive]]

Thanks for reporting Sheppy, I will look into it. Your evaluation does seem like what we want.

Comment 3

[Schalk Neethling [:espressive]]

Attachment: nowrap.png

Tested `pre-wrap` which does not seem to work. What does work is setting the anchor to `nowrap`. This could potentially cause some odd display behaviour as long anchors will break to a new line in its entirety. See attached screenshot.

This particular one is not that bad, but you can get the general idea.

Comment 4

[Eric Shepherd [:sheppy]]

That's interesting, because I tried using pre-wrap and it worked for me at the time. Interesting.

Comment 5

[melchior.im.dreital]

Attachment: Bildschirmfoto vom 2020-05-04 15-51-31.png

Comment 6

[melchior.im.dreital]

Seems that meanwhile there is no external-link icon in the style. Please see new attachment.

Comment 7

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.