This page exists to test what happens when various items would overflow the maximum width of the content area. I’ve extracted them from the main style sampling page to makee it easier to highlight the issues involved. What follows is a very long “word” with no spaces.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.
Heading Two: This is a heading with a Very Long Title Which Is Useful For Testing wrapping behavior
Here is a text paragraph before a heading one. Aute officia nulla deserunt do deserunt cillum velit magna. Officia veniam culpa anim minim dolore labore pariatur voluptate id ad est duis quis velit dolor pariatur enim. Incididunt enim excepteur do veniam consequat culpa do voluptate dolor fugiat ad adipisicing sit.
Paragraphs
Incididunt ex adipisicing ea ullamco consectetur in voluptate proident fugiat tempor deserunt reprehenderit ullamco id dolore laborum. Do laboris laboris minim incididunt qui consectetur exercitation adipisicing dolore et magna consequat magna anim sunt. Officia fugiat Lorem sunt pariatur incididunt Lorem reprehenderit proident irure. Dolore ipsum aliqua mollit ad officia fugiat sit eu aliquip cupidatat ipsum duis laborum laborum fugiat esse. Voluptate anim ex dolore deserunt ea ex eiusmod irure. Occaecat excepteur aliqua exercitation aliquip dolor esse eu eu.
Officia dolore laborum aute incididunt commodo nisi velit est est elit et dolore elit exercitation. Enim aliquip magna id ipsum aliquip consectetur ad nulla quis. Incididunt pariatur dolor consectetur cillum enim velit cupidatat laborum quis ex.
Officia irure in non voluptate adipisicing sit amet tempor duis dolore deserunt enim ut. Reprehenderit incididunt in ad anim et deserunt deserunt Lorem laborum quis. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do. Dolore ullamco ipsum magna dolor pariatur voluptate ipsum id occaecat ipsum. Dolore tempor quis duis commodo quis quis enim.
Tables
This table is wider and tests what happens when the table would overflow the normal paragraph width. Does the styling stretch the paragraph? Does the table scroll? Does something else entirely happen? We should be able to see with the table below.
| Table Heading 1 | Table Heading 2 | Center align | Right align | Table Heading 5 | Table Heading 6 | Table Heading 7 | Table Heading 8 | Table heading 9 | Table Heading 10 | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 | ||
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 | ||
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 | ||
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 | ||
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 | ||
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 | ||
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 | Item 8 | 9 | 10 |
There is another, more subtle failure mode for tables where the table would overflow the viewport of the browser, but not the maximum width of the paragraph content area. This table tests for that case. In sint dolor ullamco ad do adipisicing amet id excepteur Lorem aliquip sit irure veniam laborum duis cillum. Aliqua occaecat minim cillum deserunt magna sunt laboris do do irure ea nostrud consequat ut voluptate ex.
| Table Heading 1 | Table Heading 2 | Center align | Right align | Table Heading 5 |
|---|---|---|---|---|
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 |
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 |
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 |
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 |
Minim id consequat adipisicing cupidatat laborum culpa veniam non consectetur et duis pariatur reprehenderit eu ex consectetur. Sunt nisi qui eiusmod ut cillum laborum Lorem officia aliquip laboris ullamco nostrud laboris non irure laboris. Cillum dolore labore Lorem deserunt mollit voluptate esse incididunt ex dolor.
Code
This code has very long line lengths and exists to test the overflow behavior of the formatting for code blocks. We will do this first in an unhighlighted manner:
SELECT
previous.ex_date AS start, executions.ex_date AS end, JULIANDAY(executions.ex_date) - JULIANDAY(previous.ex_date) AS day_difference
FROM executions JOIN executions previous
ON start <> end
ORDER BY day_difference DESC
LIMIT 10
It is also helpful to have text afterwards to understand layouts. t incididunt dolor commodo consequat mollit nisi proident non pariatur in et incididunt id. Eu ut et Lorem ea ex magna minim ipsum ipsum do.
Highlighted
This highlighted code has very long line lengths and exists to test the overflow behavior of the formatting for code blocks. We will do this second to group it with the other highlighted code:
SELECT
previous.ex_date AS start, executions.ex_date AS end, JULIANDAY(executions.ex_date) - JULIANDAY(previous.ex_date) AS day_difference
FROM executions JOIN executions previous
ON start <> end
ORDER BY day_difference DESC
LIMIT 10