Print CSS

Posted on

in

,

Here is a some default print css to get started.

@media print {
 * {
 background: #fff none !important;
 color: #000 !important; }

a:after {
 content: " (" attr(href) ") ";
 font-size: 0.8em;
 font-weight: normal;
 /* wrapping required for windows 8 phone and ie10,11 */
 -ms-word-break: break-all;
 word-break: break-all;
 display: inline-block;
 /* Non standard for webkit */
 word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto; }
}

The bottom code prints out the url after any links and makes it wrap so it doesn’t break the layout.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

March 2024
M T W T F S S
 123
45678910
11121314151617
18192021222324
25262728293031