Earlier I wrote a post where I had a long code block like below:
=IMPORTRANGE("https://docs.google.com/spreadsheets/d/1J5_E0G5GqYQYTSngWxXwpR1wSR1T6hkSFdv1YEoGOSo","'Sheet In Another File'!B1")
Word-wrap would be excellent for the above line of code as it is not formatted in any way and it is really just one line (but a long one - with a horizontal scroll bar).So I decided to try and "word-wrap" it and wrote the following CSS:
.force-word-wrap pre code {
white-space: normal;
word-wrap: break-word;
}
Since markdown accepts HTML you can wrap your code block in HTML like below:
<div class="force-word-wrap">
```
=IMPORTRANGE("https://docs.google.com/spreadsheets/d/1J5_E0G5GqYQYTSngWxXwpR1wSR1T6hkSFdv1YEoGOSo","'Sheet In Another File'!B1")
```
</div>
Alternatively you could just change all code blocks on the page, but I wanted to wrap it in a div to be more in control and not add this to all code blocks. This gives me the following result:
=IMPORTRANGE("https://docs.google.com/spreadsheets/d/1J5_E0G5GqYQYTSngWxXwpR1wSR1T6hkSFdv1YEoGOSo","'Sheet In Another File'!B1")
As you can see, no horizontal scrollbar! Note: I could only get the above to work if there was a newline between the ``` and the <div> and ending </div>. Without a newline it would cause issues as only the first line would be enclosed as code.
I hope you found this helpful, please leave a comment down below!