How to show all the content in a div when printing the page

问题

I have a div which contains a long text and when printing the page I would like it so the whole text is being printed and not cut off the text.

I can provide some sample which is not my real case but it is very similiar:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background:green;
  padding:10px
}

.flex-container > div {
 background:silver;
 padding:10px;
}



@media print  
{
    div{

    }
}

@page {

}
</style>
</head>
<body>


<div class="flex-container">
  <div>1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd
  1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd
  1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ad ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk  jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk fundi</div>

</div>

</body>
</html>

So when I call window.print() on button click or press ctrl+P I cannot see whole page showing on the print preview.

PROBLEM: Cutting off the text EXPECTED RESULT: Whole content on the div

UPDATE: Screen Shot added for better explanation

As you can see the from the image above, some text is missing, I would like the div to expand and show the text on the second page and so on if there is more text.

回答1:

I had a similar problem last week. I experimented with the position, overflow and display properties and it solved my problem. You can give it a try.

 .flex-container {        
    width: auto !important;
    height: auto !important;
    max-height: 100% !important;    
    display: block !important;    
    position: static;    
    overflow: unset!important;        
  }

Ok i remember some further details. Besides the styling, i did a few hacks. Here it is:

When i click on the print link, i called a function to first copy contents of the printable division to some other division, lets say, '#print-div" (In my case, i copied the div because i needed to preserve the print view as it is. )
Then i hid everything else on the page and only made #print-div visible. (The styling i pasted earlier is meant for this print-div)
With only this div showing up at 100% width and height, you can call window.print(). This worked for me perfectly. Hope it helps you.

回答2:

You could use css @media query like this:

.flex-container {
  display: flex;
  background:green;
  padding:10px
}
.flex-container > div {
 background:silver;
 padding:10px;
}
@media print {
    .flex-container {
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      overflow: visible;
    }
}

来源：https://stackoverflow.com/questions/52721887/how-to-show-all-the-content-in-a-div-when-printing-the-page

标签

html

css

dom