CSS Pre Tag Wrap And Overflow Examples

I built this page to get a better understanding of how CSS properties affect [TODO: Code shorthand span ] 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

When I want wrapping:

NOTE: Look at this page to verify things here. (I was playing with stuff late one night and might have pasted stuf in the wrong place): A Code Block Web Component With Line Numbers, Wrap Toggles, Font Sizing And Copy Buttons
```
white-space: pre-wrap; 
overflow-wrap: break-word;
overflow-x: auto;
overscroll-behavior-x: auto;
```

When I don't want wrapping:

white-space: pre; 
overflow-wrap: normal;
overflow-x: visible; 
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 [TODO: Code shorthand span ] 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 [TODO: Code shorthand span ] 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.

~ fin ~

CSS Pre Tag Wrap And Overflow Examples

Notes

References