Skip to content

Support .code-overflow-wrap class on code blocks #228

@cwickham

Description

@cwickham

Problem

By default, code cells in blog posts get a horizontal-scroll treatment when their content exceeds the column width. For short single-line entries (e.g. a one-line shell command, a YAML key) this produces an awkward narrow scrollable strip when the content would actually fit if simply wrapped.

Quarto's HTML format supports the code-overflow-wrap option (and a corresponding .code-overflow-wrap class) that flips a code block to white-space: pre-wrap so it wraps instead of scrolling. We don't currently honour that class on this site.

Proposal

Add a CSS rule so that any code block (or its container) carrying the code-overflow-wrap class wraps:

.code-overflow-wrap pre,
pre.code-overflow-wrap,
pre code.code-overflow-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}

That lets authors opt in per block via Quarto's existing syntax ({.code-overflow-wrap} on a fence, or code-overflow: wrap in the cell options) without changing the default behaviour for code that's genuinely meant to scroll (e.g. wide shell output).

Posts that would benefit

These ported Quarto posts have at least one code cell where wrap would read better than scroll:

  • content/blog/quarto/2024-01-24-1.4-release/
  • content/blog/quarto/2024-12-12-includes-meta/
  • content/blog/quarto/2025-10-20-quarto-wizard-1-0-0/

Surfaced during the Quarto-blog port review.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions