Tag Archives: CSS

ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz

Title should not overflow the content area

A few things to check for:

  • Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
  • Check the browser window / tab title.
  • If you are a plugin or widget developer, check that this text does not break anything.

The following CSS properties will help you support non-breaking text.

-ms-word-wrap: break-word;
word-wrap: break-word;

Note that word-wrap was orginally non-standard and is now an alias of overflow-wrap:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Edge case: Nested and mixed lists

Nested and mixed lists are an interesting beast. It’s a corner case to make sure that:

  1. Lists within lists do not break the ordered list numbering order
  2. Your list styles go deep enough

Ordered – Unordered – Ordered

  1. Ordered item
  2. Ordered item
    • Unordered item
    • Unordered item
      1. Ordered item
      2. Ordered item
  3. Ordered item
  4. Ordered item

Ordered – Unordered – Unordered

  1. Ordered item
  2. Ordered item
    • Unordered item
    • Unordered item
      • Unordered item
      • Unordered item
  3. Ordered item
  4. Ordered item

Unordered – Ordered – Unordered

  • Unordered item
  • Unordered item
    1. Ordered item
    2. Ordered item
      • Unordered item
      • Unordered item
  • Unordered item
  • Unordered item

Unordered – Unordered – Ordered

  • Unordered item
  • Unordered item
    • Unordered item
    • Unordered item
      1. Ordered item
      2. Ordered item
  • Unordered item
  • Unordered item