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

NEW
Unassigned

Status

P5
minor
a year ago
16 days ago

People

(Reporter: sheppy, Unassigned, Mentored)

Tracking

({in-triage})

Details

Attachments

(2 attachments)

(Reporter)

Description

a year ago
Created attachment 8898487 [details]
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
Severity: normal → minor
Keywords: in-triage
(Reporter)

Comment 1

6 months ago
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?
Flags: needinfo?(schalk.neethling.bugs)
Thanks for reporting Sheppy, I will look into it. Your evaluation does seem like what we want.
Flags: needinfo?(schalk.neethling.bugs)
Mentor: schalk.neethling.bugs
Priority: -- → P5
Created attachment 9027617 [details]
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.
You need to log in before you can comment on or make changes to this bug.