Take the 2-minute tour ×

I have a problem where a very tall <textarea></textarea> control doesn't fit on an A4 page when the web page is printed. On the web page inside a browser, the textarea displays just fine, but when I go to print it the bottom of the textarea gets chopped off the bottom of the page, it doesn't continue to print onto the next page. I have this problem in Firefox 3.5 and IE7/8.

I have tried applying numerous CSS styles to the <textarea> control including page-break-inside: avoid and overflow: visible but to no avail.

Edit: here are all the styles that are getting applied according to Firebug:


#content div.interviewGpForm div.formRow div.formElement textarea

#tabContent input, #tabContent select, #tabContent textarea


input, select, textarea
    border:1px solid #BFCDC9;

    page-break-inside:avoid !important;

share|improve this question

7 Answers 7

Place some content under your text area, maybe just a &nbsp; if you want no content there. Also you should be using a "print css if you are not already:

share|improve this answer
I've already added a print stylesheet and tried apply various overflow properties to textareas. I've also tried added &nbsp; and random text directly below the textarea element and it gets chopped off along with the textarea, although if I place some random text in a <p> element, it appears on the next page, but the <textarea> still gets chopped off. –  Sunday Ironfoot Sep 8 '09 at 15:52

jQuery to the rescue!

$(document).ready(function() {
  $('#myTextArea').mouseleave( function(){

Thinking about how you use a textarea, you click on it, you type, and then you move the mouse to do something else. This event will only fire when the mouse moves outside of the textbox area (like to go click file->print). When ever this happens, we simply stash the contents of the textbox in a hidden paragraph.

The html:

<textarea id="myTextArea"></textarea>
<p id="myHiddenP"></p>

Then in your screen stylesheet:

#myTextArea{ height: 1400px; display: block;}
#myHiddenP { display: none;}

and your print stylesheet:

#myTextArea {display: none;}
#myHiddenP {display: block; height: 1400px;}
share|improve this answer
You could also try tying this to some other jquery events if you have other specific needs: api.jquery.com/category/events/mouse-events –  Bob Jan 24 '10 at 5:22

Have you traced the styles being applied to textarea? Specifically do you have any print styles being applied (probably by the browser defaults?) that need to be overridden?

Try adding summat like this into your stylesheet

@media print {
  /* style sheet for print goes here */
  textarea { overflow:visible };
share|improve this answer
The website has a dedicated print stylesheet that gets loaded in last (inside the <head>). I have added the following styles: textarea { page-break-inside: avoid !important; overflow: visible !important; border: 2px solid red !important; } Border is there just to make sure the print CSS is being set properly. It still gets chopped off! –  Sunday Ironfoot Sep 8 '09 at 15:27
Please see edit in main question above for CSS styles being applied. –  Sunday Ironfoot Sep 8 '09 at 15:35

This was an issue I was facing as well when working on a recent project. The problem appears to have to do with the XHTML declaration at the top of the page. Using either STRICT or TRANSITIONAL appear to cause the browser not print the overflow content. Removing the DTD solved the issue.

Now, I tested this in IE7 and FF 2.0 and only IE understood the overflow:visible in the print stylesheet. My target audience use IE, so I'm good for now removing the DTD (which is really bad!!!) as I have not been able to find a better solution and this didn't need any extra code to get this working.

share|improve this answer

There is an old IE bug report (for IE 5.5) about the same issue, and the workaround is to use javascript to copy content from the textarea into a "div", and hide the original textarea: http://support.microsoft.com/kb/294901

Looks like this is bug is not fixed after so many years!

share|improve this answer

Are you setting the height/width in rows and cols, or with the CSS properties?

share|improve this answer
I like the sound of that tho... –  daddywoodland Sep 8 '09 at 15:21
It's been set via CSS using an explicit Height in pixels –  Sunday Ironfoot Sep 8 '09 at 15:24

This seems to be a generic limitation with HTML itself. I tried added a new completely blank page with absolutely no external CSS and scripts loaded in, using the markup below:

        <textarea cols="50" rows="100" style="overflow: visible; page-break-inside: avoid;"></textarea>

...and it still gets chopped off when I go to print. Same behaviour in Firefox, IE7/8 and Opera. What gives? Am I missing something? Surely if something doesn't fit the page then you just continue it on to the next page!?

share|improve this answer
I think it's more accurate to say it's a limitation of browsers rather than of HTML. Just about all existing browsers are utterly rubbish at printing stuff, and they don't offer much (if any) support for things like page-break-inside: reference.sitepoint.com/css/page-break-inside –  NickFitz Sep 8 '09 at 16:32

Your Answer


