10 CSS Tricks You Need to Know About

I started to share 25 Javascript tricks and solutions you need to know about which were well-received so I decided to share some CSS tricks as well. I really believe that a lot of people adopt a library or framework because they want a solution but are not aware of how simple these solutions can be. I am constantly sharing tricks so follow my YouTube channel for video tutorials.

1 — Truncate with Ellipsis (single line)

If you want to maintain a single line of text but want to show 3 dots(ellipsis) at the end in case the text ends up being too big, you need this trick. This is one of the examples which illustrate a bad CSS API design due to the fact you need all these combinations of properties for this to work.

The element must be a block or inline-block, the text-overflow does not work without the overflow being hidden and the element must have a defined width or a max-width set. The white-space value of nowrap (reads No Wrap not Now Rap) simply forces the text not to break into a new line

p {
  /*  use max-width so the ellipsis
  only shows when reached that size     */
  
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

2 — Truncate with an ellipsis (multiple lines)

If you want ellipsis on multiple lines there is an entire, weird CSS solution to this. You can check this article on CSS-Tricks for more alternative options and details.

p {
  /* old display option */
  display: -webkit-box;
  -webkit-box-orient: vertical; 
  /* max number of lines to show */
  -webkit-line-clamp: 3;
  /* needed for it to work */
  overflow: hidden;
}

3 — Center vertically

The options to center vertically are vast depending on your situation really. Let’s look at a few of my favorites which do not include some other weird or, in my opinion, unmaintainable hacks.

Vertically center anything inside a display flex container:

.flex-vertically-center {
  display: flex;
  align-items: center;
}

Vertical alignment an inline, inline-block, or table-cell box: