Вы не можете решить эту проблему только с помощью CSS.
Почему Pure-CSS-решений недостаточно (с демонстрацией)
Позвольте мне убедить вас, что ответов с использованием таблиц стилей печати и overflow: visible недостаточно. Откройте эту страницу и посмотрите на источник. Только то, что они предложили, верно? Теперь распечатайте предварительный просмотр (скажем, в Chrome 13 на OS X, как я). Обратите внимание, что вы можете видеть только одну или две строки заметки при попытке печати!
Вот снова URL для моего теста: https://alanhogan.github.io/web-experiments/print_textarea.html
Решения:
Ссылка JavaScript, которая открывает новое окно и записывает в него содержимое текстовой области для печати. Или:
Когда текстовая область обновляется, скопируйте ее содержимое в другой элемент, который скрыт для экрана, но отображается при печати.
(Если ваш textarea только для чтения, то также возможно решение на стороне сервера.)
Обратите внимание, что textarea обрабатывают пробелы иначе, чем HTML по умолчанию, поэтому вам следует рассмотреть возможность применения CSS white-space: pre-wrap; в новом открытом окне или к вашему помощнику div соответственно. IE7 и старше не понимают pre-wrap, поэтому, если это проблема, либо примите ее, либо используйте обходной путь для них. или сделать всплывающее окно фактически простым текстом, буквально обслуживаемым типом носителя text/plain (для которого, вероятно, требуется компонент на стороне сервера).
Решение «Print Helper» (с кодом + демо)
Я создал демо одного метода JavaScript .
Основная концепция заключается в копировании содержимого текстовой области в другой помощник по печати. Код следует.
HTML:
<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>
CSS (все / не для печати):
/* Styles for all media */
#print_helper {
display: none;
}
CSS (печать):
/* 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 (с 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>
Опять же, успешная демонстрация на основе JavaScript находится на https://alanhogan.github.io/web-experiments/print_textarea_js.html.