A CSS Word-break Bug
So on my last post, I encountered a strange bug on Chrome (but not on Firefox) where some of my text was breaking mid-word, without so much as a hyphen inserted. Here’s a screenshot:
I’m using the Hexo framework for my blog, along with a theme from github called Apollo, so I started reading through the SASS files, but couldn’t isolate what exactly was causing this strange bug I’d never encountered before.
Several online searches, however, lead me to the
word-break css property. According to MDN, “the word-break CSS property is used to specify whether to break lines within words.” Sure enough, searching the SASS files for the Apollo theme, I found:
MDN says that
break-all specifies that “word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.” Sure enough, I realized the strange line breaks only occur during long anchor text. I’m guessing this was specified to break up long URLs, however since I use descriptive text as my anchor text, I commented out this attribute and my text rendered as expected.