nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

No space between last two words in link text (anchor liks not affected)

Courtney.M.362

Hello,

I have been working for days teaching myself the code needed to have a small image appear before link text, with a different icon based on the link's URL. There are 9 different URL-specific icons. I had the style sheet all figured out to get the icons showing up as expected, and I thought I was in the clear. BUT…

Now, for all links, the last two words in the link text do not have any space between them. I have checked the HTML, and there is a space there. It appears as it should in the WYSIWYG editor, but when published, there is no space between the last two words in the link text. I've tried plugging the code into gen AI to try to troubleshoot, but that's not getting me anywhere.

In WYSIWYG they look like:

Published they look like:

There is also some strange behaviour happening with one of the longer text links - almost like the text is in columns. It's indicated in purple in the video. Anchor links are not affected (shown in yellow in the video).

link text spacing.mp4

This is happening on all pages where the new style sheet "linkstyles.css" has been added.

What should I try next?

Thanks!

Courtney

Find more posts tagged with

HTML Templates

Accepted answers

Courtney.M.362

I think I figured it out. Adding in a space after the link text inside the a tag will result in a space between the last two 'words' in the link text.

All comments

Derik.P.149

Would you please post your CSS styles that affect the links as well as a snippet of the code for one of the broken links?

Courtney.M.362

There are four style sheets that are applied to the content pages in our course - three were part of our original content template, and the fourth is one I added myself. The code from the .css that I added is in the attached doc. There are a few other elements that are styled by this code, but I wanted to include the whole thing in case there is some other bit of code that is affecting the links without me knowing - I'm learning this as I go.

linkstyles.css.docx

HTML for one of the affected links:

<p style="text-align: left;"><a href="https://sfs-tools.ca/get-started-guide/" target="_blank" rel="noopener">SfS Get Started Guide for Practitioners</a></p>

Courtney.M.362

I think I figured it out. Adding in a space after the link text inside the a tag will result in a space between the last two 'words' in the link text.

Derik.P.149

@Courtney.M.362

The Cause

Seems like this is being caused by a strange combination of processes:

The anchor tags are display type inline-flex. With this rule, leading and trailing white space is collapsed.
When target is "_blank," Brightspace does some server-side rendering changes to isolate the last word of the link text to its own span element. I would guess this is for formatting the open-in-new-tab symbol.

The Fix

There is a new CSS property that fixes this issue right off the bat. However, it is currently only supported in 78% of browsers. Unless your userbase is guaranteed to be using an up-to-date Chromium-based browser, I would recommend using the second fix.

The other fix would be to add a selector for the newly-generated lastWord class, and give it a non-breaking space character. This will not be collapsed.

a .lastWord { content: "\0a00"; }

Potential Issue

With the way that changing target to "_blank" adds a new element, it messed with the way that flex distributes the elements, i.e., the words preceding the last word are in a column and the last word is in another column. When screen size shrinks, you'll find that the formatting may look very strange.

I recommend that you rethink the display type unless you can guarantee that your users will not use mobile devices to access your lessons.

Hope this helps!