Category: CSS

To align the last row to the grid with CSS Flexbox, we use the :after selector.

For instance, we write

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

to add the flex: auto; to the part of the page after the element with class grid to align the last row to the grid.

To disable a href link in CSS, we set the pointer-event property.

For instance, we write

a {
  pointer-events: none;
}

to disable links by setting pointer-events to none.

To make Twitter Bootstrap tooltips have multiple lines with CSS, we set the white-space property.

For instance, we write

.tooltip-inner {
  white-space: pre-wrap;
}

to select the tooltip-inner class and set the white-space property to pre-wrap to wrap the tooltip text.

To add cross-browser multi-line text overflow with ellipsis appended with CSS, we use the -webkit-line-clamp property.

For instance, we write

<div>
  This is a multi-lines text block, some lines inside the div, while some
  outside
</div>

to add a div with text.

Then we write

div {
  width: 205px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

to add -webkit-line-clamp: 2; with the width and height to hide everything after 2 lines.

To disable browser print options (headers, footers, margins) from page with CSSm we set the @page rule.

For instance, we write

<style type="text/css" media="print">
  @page {
    size: auto;
    margin: 0mm;
  }

  html {
    background-color: #ffffff;
    margin: 0px;
  }

  body {
    border: solid 1px blue;
    margin: 10mm 15mm 10mm 15mm;
  }
</style>

to set the margin to 0mm in the @page block to hide all the margins when printing.