Formatting list items

Test cases

List item formatting test 1

• To test this we need very long lines that have words like antidisestablishmentarianism so that we can detect the failure to wrap the lines.
• As well as regular lines, for filler, but while we are at it, test code in a link text.

What happens if we have a paragraph in the middle?

• Another very long line of text, this time in a list following a paragraph
  • And some really, excessively long and drawn out antidisestablishmentarianism-based code blocks following in a sub-list
  • Like these ones, and on a real site, even more

List item formatting test 2

The second test required another page

The fix

For regular text in list items

.main .content {
    ol,
    ul {
        width: 100%;

        & > li {
            width: 100%;
            overflow-wrap: break-word;
            overflow-wrap: anywhere;
        }
    }
}

Plus, making sure code and pre code blocks have CSS like

pre {
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

and a width or max-width that results in overflow when width exceeds the screen real estate.