For this you can use a print media query in your stylesheet which contains the desired page margins, like
@media print {
@page {
margin-top: 50mm;
margin-bottom: 20mm;
}
/* ...other print styles added here... */
}
For this you can use a print media query in your stylesheet which contains the desired page margins, like
@media print {
@page {
margin-top: 50mm;
margin-bottom: 20mm;
}
/* ...other print styles added here... */
}
is kind of this you want to achieve ??
*{
margin:0;
padding:0;
}
.container{
display:flex;
flex-direction:column;
justify-content:center;
background-color: #444;
padding:50px;
}
.page{
width:450px;
height:900px;
padding:50px 5px 20px 5px;
background-color:#fff
}
.content{
height:100%;
text-overflow: ellipsis;
white-space:no-wrap;
overflow:hidden;
/* background-color: #888; */
border: 1px solid red;
}
<div class="container">
<div class="page">
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus deserunt sunt consequuntur, veritatis itaque illo fugiat repellat suscipit architecto nam dolores rem ab. Labore ab itaque maxime praesentium dolorem provident aut cupiditate sequi iure atque aperiam nisi velit sunt similique fugiat, optio delectus eveniet reprehenderit. Quas, ducimus odio aut vel quae blanditiis hic quos iste tenetur architecto rerum deserunt dolor excepturi nostrum ipsa eius natus a aliquid reiciendis fugit repudiandae corporis quidem? Magnam tempore facilis unde laboriosam est perspiciatis nemo eius numquam quam dolorem minima assumenda cum repellat ipsam, asperiores dolor, libero perferendis at eligendi. At consequatur repellendus iste eum ea quisquam tempora ex assumenda necessitatibus, fugiat, alias nesciunt doloremque dolores et quas ad enim! Magni eius tenetur quo, enim soluta ex nisi provident maxime error esse fugit! Pariatur, temporibus? Omnis aliquam fugiat accusamus doloribus repudiandae officia hic! Explicabo natus aperiam, molestias ad nam exercitationem, nisi molestiae architecto ducimus quam labore nemo non, delectus alias dolores aspernatur laboriosam. Perspiciatis, dolorum error. Reiciendis reprehenderit debitis non molestias sapiente dolor earum odio, nihil rem, magnam, iste similique. Aspernatur quo corporis possimus dolor mollitia autem aperiam rem at debitis minima exercitationem impedit temporibus, dolorem magni veritatis excepturi nam aliquam obcaecati perspiciatis inventore voluptatem, soluta iste! Aliquid sequi non placeat delectus quasi, repellendus fugiat? Facilis deserunt et totam ipsum? Eum, quae laudantium ut asperiores cum modi, ab dolor impedit est dolore et provident, illo maxime voluptatibus. Unde explicabo perspiciatis doloremque blanditiis quia officiis. Minus qui explicabo laboriosam dicta. Sapiente vero et voluptas deserunt unde, nostrum vitae eaque molestias nulla ex optio commodi ducimus nisi corrupti laudantium quis. Quae autem explicabo quas amet, laudantium ad expedita nulla. Autem fugiat nobis ipsa cumque quibusdam obcaecati dolore similique minima quaerat, assumenda quas labore ipsam, molestias necessitatibus, repellendus incidunt iste sed ea deleniti quod cum ducimus! Eligendi dolores numquam nemo consectetur minima ipsa aliquam ullam laboriosam dicta fugiat amet illo commodi hic sit nam aut, quisquam nesciunt. Dolor vitae, est officiis nostrum officia tempore quis quam, expedita labore consectetur aut deleniti beatae eligendi voluptatibus. Omnis quae sequi, cumque alias est sunt ullam explicabo. Amet, eius. Beatae doloribus quibusdam, sunt id rem eum nisi voluptatum tempora perspiciatis deserunt? Eius sed quam, aliquid nesciunt repellendus vitae, enim, facere id praesentium minima corrupti veritatis placeat. Fuga error, perferendis neque recusandae totam esse maxime quo voluptates molestias nemo, sed velit aspernatur, impedit necessitatibus aperiam similique inventore ut quaerat! Quas amet assumenda placeat quis voluptates inventore harum sed alias dolorem delectus cum, labore temporibus. Blanditiis nobis quasi placeat porro at nesciunt doloribus accusamus fugiat sit, excepturi iusto non enim numquam! Odit, nihil cum? Sint ratione, ipsam saepe laboriosam fugit est fugiat labore explicabo minima autem, dolorum corporis ipsa. Cumque sit assumenda quo fugiat impedit quam voluptate libero natus nobis adipisci, eveniet necessitatibus iste quis vitae provident iure dolore. Dolorem corrupti, vero nobis quidem quos esse vel optio animi, aspernatur ratione deleniti minus sint ipsa non voluptas. Incidunt minus ut deleniti dolorem itaque maiores optio dolorum rerum ea. Asperiores dolores officia ad minima exercitationem consequatur earum optio. Aliquid quas placeat, autem accusantium ducimus exercitationem deserunt cupiditate dignissimos quos illum assumenda nostrum saepe voluptate vero blanditiis laborum facere omnis optio dolore voluptates aliquam nesciunt sit fuga repellat? Assumenda necessitatibus officiis laborum reprehenderit. Quia nulla non quo fugit incidunt, laudantium fuga architecto explicabo! Omnis mollitia excepturi repellat eveniet, voluptas consectetur minima cupiditate non. Repellat, soluta deleniti explicabo non odio provident veritatis repudiandae iure a veniam! Doloremque nemo soluta placeat! Nihil iste a atque illum deleniti consectetur enim doloremque necessitatibus veritatis. Fugiat nam veniam, eaque obcaecati eum eius animi neque maxime expedita provident iste quod sint architecto dolor ut quaerat vel, necessitatibus asperiores corrupti consequuntur, delectus nemo fugit? Molestias culpa aliquam quis repudiandae rem id dolor nisi voluptatum! Quis voluptates, commodi necessitatibus optio numquam temporibus possimus perferendis iusto quaerat natus minus animi amet ipsam, quia officia ex totam quas! Minus autem nobis provident beatae, iste id voluptatibus, illum inventore ratione odio fuga enim hic soluta molestiae? Blanditiis neque voluptas nulla dolor maxime quae iste quisquam quasi facere, aliquam, tempora fugiat enim doloremque illo praesentium, laudantium dolore aperiam. In veniam consectetur odit quas quidem, eveniet dignissimos illo quisquam voluptatem asperiores alias eum ducimus, dolorem incidunt at quis facilis provident necessitatibus tempora, totam amet! Deleniti culpa illo iusto placeat id officiis vitae ea quaerat quasi eligendi, nemo a fuga debitis laboriosam, dolorum tempora iste totam voluptate repellendus enim quisquam eveniet! Omnis, asperiores officiis hic cupiditate eum a nesciunt? Optio adipisci odit iure officia veritatis, assumenda fugiat in impedit perferendis praesentium, dolores eum atque nostrum aliquam quos eaque, nesciunt ipsa necessitatibus cumque quidem vero illum maiores? Quod tenetur libero et quasi magnam fugit odit vitae ipsam nemo officia, doloremque placeat? Libero ut veniam nulla delectus dicta, obcaecati, illum consequatur deleniti numquam neque quasi, omnis quis est impedit nobis blanditiis facere incidunt eaque? Porro alias iste, officiis ullam dignissimos reiciendis. Aperiam dolor distinctio ut, vero provident velit blanditiis atque omnis dicta, sint corporis sequi expedita error sed aliquid libero accusamus, unde ipsa cupiditate beatae tempore. Natus possimus laudantium suscipit aperiam. Fugiat doloremque tenetur, blanditiis dicta eum placeat distinctio quibusdam incidunt optio voluptatibus, saepe earum porro, magnam quia et nemo libero. Vel fuga corporis fugit laboriosam sed cum ut aspernatur qui, excepturi iste explicabo magni iusto minima doloribus aliquam exercitationem facere sunt beatae? Eius libero dicta et id eligendi sapiente, magni quaerat eveniet odit, minima quos aspernatur ad reprehenderit voluptatum quia aperiam beatae ducimus possimus natus, est nisi ipsa illum ex sit? Ipsam, praesentium sunt in similique sapiente accusamus obcaecati sint suscipit corrupti earum adipisci non illum itaque. Dicta nulla cumque voluptates commodi possimus quos itaque enim nam consequuntur in odio harum modi, deserunt inventore debitis, accusantium quaerat? Enim placeat laudantium dolore similique, totam voluptate sapiente, quo non eum, soluta aut. Et delectus error eaque recusandae sint? Blanditiis modi delectus quibusdam est nobis nesciunt beatae quia, architecto possimus, tempora dignissimos cumque animi, officia autem dolorem! Odio repudiandae voluptas qui impedit accusamus placeat exercitationem soluta culpa officiis quis, reprehenderit facilis, omnis minima cupiditate?</div>
</div>
Does you want something like this
I’ve a div element that acts as a container for other div elements. Those elements display long text that could overflow over many pages. I need that text to be printed after 50mm of the top edge of every physical paper, and only to 20mm prior to the edge of every physical paper. That’s why I created the container div element, and tried to set it’s top and bottom margins. But my tries failed.
The following video shows the result I need to reach…
https://www.youtube.com/watch?v=SJ2av3bVtQk
P.S. My has a background image, and I need that image to be printed from the very top of the page to the very bottom of the page, with no margins applied to it at all.
Pardon me, I modified the question to make it more clearer. Kindly, review it.
@Shivamkaushal No codepens. The OP needs to put a
Here’s a Pen…
There’s a background image for the body.
Unfortunately, my
has a background image, and I do not need the margins to affect that image. I need it to be printed from the very top of the page to the very bottom of the page, without any margins applied to it at all.does that actually work, i.e. do you have a printer that can print to the edges of the paper? (all printers I ever had couldn’t do that)
Yes. I mean with no margins at all.
I was asking if you have a printer that can do that / have you tried it?
I do not remember the last time I tried this, but I guess so.
Pardon me, I modified the question to make it more clearer. Kindly, review it.
Any help? @Shivam kaushal
@Eslam you want Extra text that is overflowing or that is being cut you want that text to move on to the next page ??
I am not sure I understand your question, but kindly, see the video in my main question. The text is overflowing over many pages, but in each page, text should be displayed after 50mm from the page’s top edge and only to 20mm before the page’s bottom edge. Just bear in mind that there should be a background image for the body that should be displayed on every page, and should fill each page from the very top to the very bottom. Setting page margins could’ve solved the problem if there weren’t a body background image.