Recently as I was working on some styles for my blog, I ran into an issue where I had a block of anchor tags rendered in JSX, and they didn't look right.
All of the links had trailing spaces, and those spaces were being underlined!
How did we get here?
I had an array of tags, and they were being displayed in a <div>, like so:
<div>
{
tags.map((tag) => (
<a class="tag" href={`#`}>
#{tag}
</a>
))
}
</div>
I didn't fully understand why the underlined, trailing space was being rendered, and weeped as the gods of JavaScript mocked me.
After getting over it, I tried changing the word-wrap and other various CSS styles to fix the links, with no success. I admit it took me way longer than I expected to find a solution, and I wrote this blog to save me from my future self who will inevitably run into this problem again.
How did we overcome?
Turns out, if you add display: inline-block, it removes the underlines in the spaces!
Here's a CodePen to show this lil CSS trick in action!
The end, stay safe, nerds.
Top comments (5)
i've definitely ran into this before - didn't know that
display: inline-blockfixes it! thanks for sharing!Neat!!
That has nothing to do with JSX, you clearly have whitespace between your word and the end tag (the newline).
If you don't want the whitespace, don't add one ? 😅
<a class="tag" href={`#`}>#{tag}</a>Thank you for sharing.
Was the trailing space part the link label? Or is it due to JSX somehow? I didn't fully understand that that part.
It was due to JSX somehow 🙃
I ended up controlling the spacing a bit differently like this:
github.com/cassidoo/blahg/blob/mai...