Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

CSS Pre Tag Wrap And Overflow Examples

I built this page to get a better understanding of how CSS properties affect `pre`` tags. There is no css on the page other than what you see listed on the page. Each line in the examples starts with a capitalized word followed by a collection of text and underscores designed to make it easier to see each effect.

I'm using two different versions in production

  1. When I want wrapping:

    `white-space: pre-wrap; overflow-wrap: break-word;``

  2. When I don't want wrapping:

    `white-space: pre; overflow-x: auto; overscroll-behavior-x: none;``

Notes

  • From what I can tell there's not a way to suppress breaking at hyphens without breaking strings at another place. Using `line-breaks: anywhere;`` prevented breaking on the hyphens but broke wherever the string touched the boundary.

  • The primary recommendations I found for dealing with hyphens would be to wrap them in spans with nowrap or to change the character to something else that doesn't wrap. (but that would effect copy/paste). So, the wrap seems like the best option if it's important enough to put in the work to make that happen

  • An interesting play would be to update a syntax highligher to apply the nowrap along with the rest of the formatting

  • I'm not using `text-wrap`` in any of the examples as it' still experimental

  • There's also a 'word-break' property but it seems aimed at Chinese/Japanese/Korean (CJK) text. I don't know enough about that to include it here.

References