text overflowing (i.e. not wrapping) in Jekyll blog post

0
votes

I have a Jekyll site, hosted by GitHub Pages, where, randomly, the text will overflow when rendered from my markdown files. (Does this on my local Jekyll server as well as Pages.)

For example, you can clearly see the issue on this page: http://shanekercheval.me/determine-idea-assumptions-and-next-steps/

What is causing this? It appears to be random, and this isn't the only page that has this problem.

The source files are at: https://github.com/shane-kercheval/shane-kercheval.github.io

and this particular markdown file is at: https://github.com/shane-kercheval/shane-kercheval.github.io/blob/master/_posts/2015-06-28-determine-idea-assumptions-and-next-steps.md

2
markdownjekyll
note that the reason you can't scroll horizontally is because I have overflow-x: hidden; on the body element (for different reasons), but that doesn't explain why it is overflowing in the first place. – shaneker
furthermore, I've also installed/created a fresh jekyll project (jekyll 3.0.1), copied the markdown file into the new project, and it has the same display issues – shaneker

2 Answers

0
votes

Found the problem, somehow the file got corrupted or was encoded incorrectly.

enter image description here

0
votes

If you inspect the element with the problem you will see that each of the spaces are non-breaking spaces ( ), which is casing the lines to not wrap (the intended purpose of a NBSP). For example, the first offending paragraph in your example page looks like this:

<p><strong>The&nbsp;goal&nbsp;in&nbsp;the&nbsp;startup&nbsp;phase&nbsp;is&nbsp;to&nbsp;figure&nbsp;which&nbsp;assumptions&nbsp;should&nbsp;be&nbsp;validated&nbsp;first</strong>,&nbsp;which&nbsp;depends&nbsp;on&nbsp;where&nbsp;your&nbsp;confidence&nbsp;is,&nbsp;what&nbsp;data&nbsp;you&nbsp;have,&nbsp;and which&nbsp;assumptions&nbsp;you&nbsp;can&nbsp;validate&nbsp;the&nbsp;quickest&nbsp;and&nbsp;most&nbsp;inexpensively.</p>

Replace each of those &nbsp; with a regular space, and your problem will go away.

The peculiar thing is that it appears that those NBSPs are not present in the source Markdown files, and in fact, when I "view source" in the browser, they are not present there either. My guess would be that some JavaScript is altering the HTML to insert them, but this isn't really a debugging forum. In any event, when using a browser's developer tools to view the actual live HTML code (what the browser actually sees, not the HTML source served by the server) the problem clearly exists. Something is causing the browser to insert those NBSPs. Hope that points you down the right path.