Home

CSS Pre Tag Wrap And Overflow Examples

September 2023

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:

    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): [issue: could not generate tlink]

    white-space: pre-wrap; 
overflow-wrap: anywhere;
overflow-x: auto;
overscroll-behavior-x: auto;

    NOTE that overflow-wrap could be break-word but that doesn't work with with long code lines

  2. 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 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.
end of line

References