Disable word wrap for code blocks?

@ryanjamurphy thanks, but I’m trying to disable word wrapping. Basically how Stack Overflow does it—where the code blocks inherit the width of the page, and show a horizontal scrollbar to handle overflow text if it’s wider than the view.

Oh, sorry. Then changing the white-space property should do it:

    white-space: nowrap;

white-space: pre; also works on my end.

The other changes would have to apply to the code block itself. Inspecting Stack Overflow itself offers some hints:

Yes white-space: pre; works for the wrapping, but the background box/color (see my screenshot above, the red highlighted edge) isn’t in the right place. That’s what I was getting at…

@luckman212 - Try this:
overflow-x: auto;
It’s what I use on most of my code blocks when I don’t wrap.

Other parameters you can try in place of auto are scroll and hidden - they look similar, but achieve different things. Here’s a reference at W3Schools.

1 Like

There hasn’t been any activity for 5 days, could you please see if you’d like to pick any of the existing answers as the solution, or do you still need help with something?

Would appreciate it if you could clarify on that, thanks!

If you’ve uncovered a bug, please post in #bug-reports. If you’re asking about a feature that’s not there yet, you can post in #feature-requests.

If this is about troubleshooting community plugins or themes, it might be a good idea to ask in #plugins and #css-themes on our Discord.

To me it would be great to have a complete example.

@Nebucatnetzer - That’s fair.
Out of the box in preview, Obsidian applies autoscroll. That is, when the content is too long for the view pane, a scrollbar appears and it scrolls, keeping to the border of the code block (not outside, as in OP’s shot).
In editor, the long lines wrap so the content remains visible.

That’s a long way of saying (guessing) that the OP is probably using a theme that overrides default in some way. If it’s still an issue, he could let us know what theme he’s using, or contact the author to troubleshoot. If it’s a completely self-authored theme, then providing the code here could help, too.

@luckman212 - are you still having issues? If no, please let us know what worked. If yes, could you provide more details, please? Others may benefit from the answers we find, especially if they are using the same theme you are.

I’m just using the standard Dark theme. Still struggling to find the right CSS to get exactly what I want, and got a little busy with other stuff to track it down.

@luckman212 - No custom css? Interesting, I don’t have the same outcome. Could you post the code block from your example?

@Erisred Sorry yes—I have custom css, just not using an entire theme.

To help, then, I would need to know what css you have related to the pre element. Something is messing with your blocks.

I just discovered that on code blocks that you are NOT specifying a language: i.e: three backtics and css or js etc on the same line - the core setting of Settings → Editor → Line wrap affects blocks, too.

I suspect you have this turned on. I assume you’ll want to leave it where it is - for other reasons within the vault. Please confirm, then I can troubleshoot further.
I know this can be fixed with a couple lines of code.

Most probably this will work: .markdown-preview-view pre {white-space: pre;overflow-x:auto;}

The white-space:pre; keeps the intended line breaks, while white-space:nowrap; causes the whole block to render on one line (not good).
The overflow-x:auto; contains the output to the viewable area (your colored block), while allowing a horizontal scroll.

Ok, here’s what I’ve got. It’s doing pretty much what I want at this point. There’s some weirdness with very long non-breaking lines inside indented codeblocks (but this is probably just the way it works in CodeMirror)

:root {
	--color-monospace: khaki;

.markdown-source-view {
	font-family: var(--font-monospace);

code, pre {
	word-wrap: break-word;
	white-space: pre;
	overflow-x: auto;
	font-size: 0.95em;
	line-height: 1.5;

.markdown-preview-view code,
.cm-s-obsidian .HyperMD-codeblock,
.cm-s-obsidian span.cm-inline-code {
	color: var(--color-monospace);
	-webkit-font-smoothing: auto;
	font-size: 0.95em;

.cm-s-obsidian .HyperMD-codeblock {
	line-height: 1.5;

Looks like this:



Inline code indeed has its own rules - your code makes them look similar, but the Markdown spec is the reason they aren’t identical.

1 Like

This really looks like is should be the solution, but when I try it, although lines no longer wrap, it doesn’t add just one scrollbar for the codeblock — it adds a horizantal scrollbar for each line in the code block.

I guess this only works in reading view?

@scwunch Here’s what I’m using as of today with Obsidian 0.15.19. It disables wrap/adds the hscroll bar in Preview mode, but not in edit, which is what I want actually.

.markdown-preview-view pre,
.markdown-preview-view code :not(pre) {
  overflow-x: auto;
  white-space: pre;

.markdown-rendered div > pre > code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;

.markdown-preview-view code[class*="lang"] {
  overflow-x: auto;
  white-space: pre;

Ok, thanks for sharing.

Do you (or anyone else) know if there is a way to get this to work in edit mode as well? Or would that require more than just a CSS snippet?

I would actually be okay with word-wrapping in code blocks in edit mode if the overflow kept the same indentation. My only concern is that when long lines get wrapped, it makes it look like one indented piece of code is split into two.


I feel like the only propper fix can come from the devs themselves, support for codeblock related things is pretty bad atm.


Possibly with the least modification:

.markdown-rendered pre {
    position: initial;
    overflow-x: auto;

.markdown-rendered div {
    position: relative;

.markdown-rendered code {
    width: max-content;

Note: only works on preview mode

I could not get it to work with editing mode. There is not enough CSS element hierarchy available to have a scrollable parent with non-wrapped child.