Preventing unfortunate hyphenation in a code span

Help
1

Hi all,

In one of my posts, I have the code span syntax `read_excel()` to represent a function name. Jekyll’s hyphenation functionality is hitting right in the middle of the code span, so instead of rendering as read_excel() it’s outputting read-_excel() (split across two lines of a paragraph). Is there anyway to prevent hyphenation within this code span?

Thanks!

2

A screenshot of the entire block or a link to your site’s source would be helpful

3

Sorry, of course, that would be much easier. Here it is:

4

And now I’m wondering if this is a problem with the theme the site uses. (Sorry, I’m not a front end dev, I am a bit lost when it comes to styling web content). But I see this in the CSS using Chrome developer tools:

hyphens: auto

which, when I disable it, renders the code span all on one line and solves the problem. So, I think I can just hyphens: none on that span to at least solve this case. Would be interesting to do this more generally, though.

I use this theme, by the way: https://github.com/Phlow/feeling-responsive and I believe the hyphenation behavior is defined around line 53 of this file: https://github.com/Phlow/feeling-responsive/blob/gh-pages/_sass/_06_typography.scss

Our post isn’t published yet, otherwise I’d point you there.

5

Yup this is definitely the CSS adding the hyphens. Pretty sure inline code blocks all use the <code> element. Disable it there and you should be good to go.

code {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
6

Awesome, this worked perfectly. Thank you!!