Skip to main content
CSS is fun and cool and I like it.

Using Flexbox and text ellipsis together


A “new direction” in the struggle against rightward scrolling


Overflow And Data Loss In CSS



The overscroll-behavior property in CSS controls whether an element will use “scroll chaining” or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has it’s own scrolling (say it’s vertical) and you have scrolled down to the bottom of it, then by default, the next parent element up (maybe the page itself) starts to scroll in that direction. If … Read article “overscroll-behavior”


display: flow-root;


Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

There are times when a really long string of text can overflow the container of a layout.

For example:

URL’s don’t typically have spaces in them, so they are often culprits.

Here’s a big snippet with all the CSS players involved:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard 
Read article “Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)”