Cosmetic bug? pinned posts links

[writeprivacy]

When the line of pinned posts comes to an end, a pinned post title gets line broken if there is a space in the title. If there is no space in the title, then the previous title with a space gets line broken.

Example:

pin1 pin2word1 SPACE pin2word2 pin3word1 SPACE pin3word2 pin4word1 SPACE LINEBREAK
pin4word2 pin5word1 SPACE pin5word2
In this way a title gets split between one word on line 1 and one word on line 2. It confuses me, and I think readers would be confused as well.

To me it would make more sense to linebreak not in the title of a pinned post, but between titles of different pinned posts, like:

pin1 pin2word1 SPACE pin2word2 pin3word1 SPACE pin3word2 pin4word1 SPACE pin4word2 LINEBREAK
pin5word1 SPACE pin5word2

Maybe a cosmetic bug to be fixed?

The only solution I found so far to not linebreak in the middle of a post title is to replace the space with a character or symbol and add a space at the end of each pinned post title. I ended up using ˜ instead of a space between post title words, just to avoid the linebreaking in inopportune places.

pinword1 ˜ pinword2 SPACE

Not visually appealing I find.

[writeprivacy]

A workaround, which does not work under every circumstance I found, is to use either of:
markdown: &#160 (nobreak space character)
html:
said to be legacy: &nbsp (nobreak space character)
Old blog post titles (from 2 years ago) seem to not take this into account. New blog post titles do.

[matt]

You can do this a little easier with some custom CSS – it’ll make sure individual links don’t break between words. Just add this to your blog to apply it to all posts.

a.pinned {
    white-space: nowrap;
}

As far as making it the default for everyone, I’m not sure if that’s what they’ll want. But everyone should feel free to weigh in one way or the other!

[writeprivacy]

Thanks Matt.

Found another post about this kind of issue.

Pinned menu puts entry on two lines

Hi @PaulSutton, the CSS property you’ll want to use here is white-space: nowrap – this tells the individual links not to wrap the text inside them. All together, with that .pinned section cleaned up, this CSS should work: .pinned { color: #0000ff; background-color: #ffffff; font-weight: 900; white-space: nowrap; /* Prevent links from wrapping */ } body#collection header nav { overflow-wrap: break-word; /* Allow overall nav to wrap links */ }

The solution however doesn’t seem to work on my screen, it keeps everything on one line with horizontal scrolling.
The css part of write.as tells the code is over qualified (No clue what that means)

Any code I could add to force a linebreak after a specific pinned post?

I tried various combinations, all unsuccessful to me.
Tried 
 
 


The only thing that’s giving me a half elegant solution is to have:
SPACEword1&#160word2SPACE for each pinned post title, and javascript the pinned post URL to another page.