Print when textarea has overflow

Loop through each of your text areas and move the content to a holder

    window.onbeforeprint = function () {
        $('.print-content').remove();
        $('textarea').each(function () {
            var text = $(this).val();
            $(this).after('<p class="well print-content">' + text + '</p>');
        });
    }

And use the following CSS

.print-content {
  display: none !important;
}

@media print {
  .print-content {
    display: block !important;
  }
  textarea {display: none !important;}
}

You cannot solve this problem with CSS alone.

Why Pure-CSS Solutions are Insufficient (with demo)

Let me convince you the answers involving print stylesheets and overflow: visible are insufficient. Open this page and look at the source. Just what they suggested, right? Now print preview it (in, say, Chrome 13 on OS X, like me). Note that you can only see a line or two of the note when you attempt to print!

Here’s the URL for my test case again: https://alanhogan.github.io/web-experiments/print_textarea.html

Solutions:

1. A JavaScript link that opens a new window and writes the contents of the textarea to it for printing. Or:

2. When the textarea is updated, copy its contents to another element that that his hidden for screen but displayed when printed.

3. (If your textarea is read-only, then a server-side solution is also workable.)

Note that textareas treat whitespace differently than HTML does by default, so you should consider applying the CSS white-space: pre-wrap; in the new window you open or to your helper div, respectively. IE7 and older do not understand pre-wrap however, so if that is an issue, either accept it or use a workaround for them. or make the popup window actually plain text, literally served with a media type text/plain (which probably requires a server-side component).

The “Print Helper” Solution (with code + demo)

I have created a demo of one JavaScript technique.

The core concept is copying the textarea contents to another print helper. Code follows.

HTML:

<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>

CSS (all / non-print):

/* Styles for all media */
#print_helper {
  display: none;
}

CSS (print):

/* Styles for print (include this after the above) */
#print_helper { 
    display: block;
    overflow: visible;
    font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
    white-space: pre;
    white-space: pre-wrap;
}
#the_textarea {
  display: none;
}

Javascript (with jQuery):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
  function copy_to_print_helper(){
    $('#print_helper').text($('#the_textarea').val());
  }
  $('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});
</script>

Again, the successful JavaScript-based demo is at https://alanhogan.github.io/web-experiments/print_textarea_js.html.

I recently ran into the same issue. My solution was to duplicate the content into form controls for editing and into divs for printing.

In my Head I put a print stylesheet.

<link rel="stylesheet" href="printform.css" type="text/css" media="print" />

In printform.css I put the following

.screenOnly { display: none; }
.printOnly { display: inline-block; }

For textareas (and other field types that were causing problems) I used the following code

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>

When displayed on screen the textareas are shown and the divs duplicating their content are hidden. When printing the opposite applies.

I know you already picked an answer to this question but while using the print stylesheet is a good idea it didn't describe a specific solution. Setting overflow:visible on the textarea (my first idea) didn't work so I ended up going with the solution above. If you're still having difficulties I hope this helps you out