Display and Print Web page long formatted text taken from the textarea

Shell RS

How many times you have faced the issue that user has put lots of data in text area either from copy paste from the Word document or pasted from the other files may fail to display properly on web page or not printing properly while printing. Word wrap some times does not work the way you wanted right.

I know most this problem does not occur if we use div to show the data but what if you want to show the data in same format like tabs spaces or extra lines given by the user?

Showing long formatted data in web page reports and allow them to print without shedding the text or cutting the text from the right side can be done easily using following piece of code.

Using a <pre> tag with piece of CSS.

CSS:

.contentWrapper {
    /* other styles */
    display: inline;
    _white-space: pre;
    word-wrap: break-word;
    white-space: normal;
}
<pre class="contentWrapper"> your formatted text </pre>

By using the above mentioned code, you can get rid of text cutting from display or print.

It can easily take care of the extra spaces, long character sequences without space or extra lines and will show them exactly the same, the way they were put in Textarea.

Note: If you are using <table> to show the data then make sure that table-layout should be fixed. In case of nested tables, table which is containing the pre tag should be styled with fixed table-layout. You may want to explore following for word wrap.

 -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

It works IE 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

As usual, thanks for reading! Please put your comments to share your views and feedback.
- InstantKick Team