A Markdown Code Fence Is Just a CSS Class

By Joel Dare - Written August 15, 2026

Today I wanted a code block with plain text in it that would word-wrap.

I learned that code fences are much simpler than I imagined. The following is an example JavaScript code fence.

```javascript

When a markdown renderer translates that to HTML it adds a class of language- plus whatever language you typed. So, in the JavaScript example you get the following output.

<pre>
<code class="language-javascript">
Your text here...
</code>
</pre>

I learned that I can use word-wrap as my language and it will be output as the .language-word-wrap class in my HTML. Then, all I need to do is style that class to word-wrap.

The result is the following HTML code:

<pre>
<code class="language-word-wrap">
Your text here...
</code>
</pre>

Your renderer may put that class on a wrapping div instead of on the code tag. Mine does, which is why my selector is just the class.

Here’s the CSS I used.

.language-word-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

And here’s what it looks like in practice.

# A Very Long Line

This is a very long line but you don't have to scroll horizontally. Instead, this line will be wrapped on word boundaries. It works just like the `word-wrap` feature in your favorite text editor. That's pretty neat.