Telst na CSS <div class = "dontprinttext"> komt onbedoeld op nieuwe regel

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
<style type="text/css" media="print">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
background-color: #FFFFFF;
}
h1 {
font-size: 24pt;
color: #000000;
}
.printtext {
display: block;
}
.dontprinttext {
display: none
}
img {
display: none
}
h2 {
display:none
}
-->
</style>



<p style="margin-top: 0; margin-bottom: 0">
<font face="Verdana" size="2">
Tekst1<div class="dontprinttext"><a href="Tekst2_URL-">[Tekst2]</a>[Tekst3]</div>Tekst4

toont op scherm (en afdruk op papier)
tekst1 op regel 1
tekst2+3 op regel 2 (wordt evenwel niet afgeprint zoals bedoeld)
tekst4 op regel 3

Hoe krijg ik alle teksten na elkaar op dezelfde regel ?
 
Gebruik geen block-element

Een <div> is een block-element,
dat betekent onder andere dat hij sowieso op een nieuwe regel start.

Suggestie:
HTML:
Tekst1<span class="noprinttext"><a href="Tekst2_URL-">[Tekst2]</a>[Tekst3]</span>Tekst4
 
RE: tekst2+3 op regel 2 (wordt evenwel niet afgeprint zoals bedoeld)
Wel of niet de bedoeling? Als je class="dontprinttext" weghaalt dan worden tekst 2 en 3 wel geprint.

Css geleend uit Bootstrap v4 normalize. Je voorkomt er wat problemen mee op de printer.
Code:
<style type="text/css">
@media print {
    *, *::before, *::after {
        text-shadow: none !important;
        box-shadow: none !important;
    }
    blockquote {
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr, img {
        page-break-inside: avoid;
    }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
    table {
        border-collapse: collapse !important;
    }
    table td, table th {
        background-color: #fff !important;
    }
    /*
    hier komt jouw printer css
    */
}
</style>
Zoals je het nu hebt worden tekst2 en tekst3 niet geprint, de andere teksten wel.
Je kan de printer css hoge prioriteit geven door het volgende te doen
Code:
@media print {
    ....
    img, h2, .dontprinttext {
        display: none !important;
    }
}
Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan