One solution is to add some values for the white-space property, like pre-wrap, but it will cause issues if we have one more multiple line breaks inside <kbd>.
Would become:
An alternative would be to automatically add left and/or right margins on the emoji if it’s not the first or last element.
In the current state:
With this added CSS:
kbd {
// current rules
img {
margin: 0 .5em;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
Would these forced margins be acceptable? It’s prettier and increases readability, but it will be impossible for the user to not have a margin between the emoji and some text (as for me, I’d be happy since I see the forced margin as a benefit).