Categories
CSS

How to disable a href link in CSS?

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.

Categories
CSS

How to make Twitter Bootstrap tooltips have multiple lines with CSS?

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.

Categories
CSS

How to add cross-browser multi-line text overflow with ellipsis appended with CSS?

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.

Categories
CSS

How to disable browser print options (headers, footers, margins) from page with CSS?

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.

Categories
CSS

How to add horizontal scrollbar on top and bottom of table with CSS?

To add horizontal scrollbar on top and bottom of table with CSS, we set the transform property.

For instance, we write

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
}

.child {
  transform: rotateX(180deg);
}

to rotate the element with class parent 180 degrees with transform: rotateX(180deg);.

And we rotate the element with class child in the element with class parent 180 degrees with transform: rotateX(180deg);.