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
-
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-wrapcould bebreak-wordbut that doesn't work with with long code lines -
When I don't want wrapping:
white-space: pre; overflow-wrap: normal; overflow-x: visible; overscroll-behavior-x: none;
1. /* No Styles Applied */
Details
- This is the baseline with no CSS applied
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
2. white-space: pre
Details
- This is the default behavior (same as above with no CSS applied)
- Long lines extend outside the bounding box (BRAVO)
- Multiple consecutive white space characters are preserved (CHARLIE)
- Long strings extend outside the bounding box (HOTEL)
- Long strings do not break on hyphens (JULIETT)
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
3. white-space: break-spaces
Details
- Long lines are broken at spaces
- Long lines are wrapped inside the bounding box (BRAVO)
- Multiple consecutive white space characters are preserved (CHARLIE)
- Long white space is preserved after a break (DELTA) - this is the main difference between 'break-spaces' and 'pre-wrap'
- Long strings extend outside the bounding box (HOTEL)
- Long strings break on hyphens (JULIETT)
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
4. white-space: normal
Details
- New lines in the source are ignored
- Text is wrapped inside the bounding box
- Multiple consecutive white space characters are collapsed (CHARLIE)
- Long strings extend outside the bounding box (HOTEL)
- Long strings break on hyphens (JULIETT)
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
5. white-space: nowrap
Details
- New lines in source are ignored
- A single line of text extends outside the bounding box
- Multiple consecutive white space characters are collapsed (CHARLIE)
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
6. white-space: pre-line
Details
- This is like 'pre-wrap' but white space is collapsed
- Long lines are wrapped inside the bounding box (BRAVO)
- Multiple consecutive white space characters are collapsed (CHARLIE)
- Long white space is collapsed onto the same line (DELTA)
- Long strings extend outside the bounding box (HOTEL)
- Long strings break on hyphens (JULIETT)
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
7. white-space: pre-wrap
Details
- This is like 'pre-line' but white space is preserved
- Long lines are wrapped inside the bounding box (BRAVO)
- Multiple consecutive white space characters are preserved (CHARLIE)
- Long white space is collapsed after breaking to a new line (DELTA) - this is the main difference between 'break-spaces' and 'pre-wrap'
- Long strings extend outside the bounding box (HOTEL)
- Long strings break on hyphens (JULIETT)
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
8. white-space: pre-wrap, line-break: anywhere
Details
- Same as 'pre-wrap' except words and strings break in the middle if they would break the bounding box (KILO)
- The 'line-break' property is listed as being designed for Chinese, Japanese, or Korean (CJK) texts
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
9. white-space: pre-wrap, hyphens: auto
Details
- Same as 'pre-wrap' except the browser inserts hyphens and breaks to new lines on them based on language specific hyphenation rules
- Compare (HOTEL) for an example
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
10. white-space: pre-wrap, overflow-x: auto
Details
- Link 'pre-wrap' but long strings don't wrap
- Nothing is seem beyond the bounding box
- Strings longer than the bounding box introduce a horizontal scroll to see the initially non-visible content
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
11. white-space: pre-wrap, overflow-x: auto, overscroll-behavior-x: none
Details
- Link 'white-space: pre-wrap, overflow-x: auto', but prevents scroll chaining
- Scroll chaining is when scrolling in one element reaching its boundary and the parent starts scrolling
- There is also a 'overscroll-behavior: contains'. The 'none' is listed as preventing scroll to refresh in browsers while 'contains' does not
- Testing the difference between 'none' and 'contains' is left as an exercise for the reader
- I'm using the '-x' version which allows vertical scrolling in the parent
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
12. white-space: pre-wrap, overflow-x: auto, overscroll-behavior: none, height: 150px
Details
- Same as 'overscroll-behavior-x' but applies to both x and y as demonstrated by setting an explicit height
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
13. white-space: pre-wrap, overflow-wrap: break-word
Details
- Overflow wrap is the primary name of the property. 'word-wrap' is alaised to it as well
- Same as 'pre-wrap' except the browser words are broken at the point they would otherwise break the bounding box
- Compare (HOTEL) for an example
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
14. white-space: pre, overflow-x: auto, overscroll-behavior-x: none
Details
- Basic 'pre' but contents scrolls instead of breaking the boundary
- Scrolling doesn't chain up once the edge of the bounding box is reached
- Look at the DELTA line in example 11 for the white space collapse difference
ALFA ____ ____ ____ BRAVO _______ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ CHARLIE white space DELTA white space ECHO __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ FOXTROT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ GOLF __ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ HOTEL ____ greetthenewguestsandleavequicklyguesstheresultfromthefirstplace ____ INDIA ____ GreetTheNewGuestsAndLeaveQuicklyGuessTheResultFromTheFirstPlace ____ JULIETT ____ steerthe-shipnorthwardssayitslowbutmakeitaddsalttothe-hotdish ____ KILO stringalfabravo stringcharliedetlaechofoxtrotgolfhotelindiajuliett endtext
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-wrapin 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 --