Wrapping text on a webpage

I query an SQLite database using PHP code on a webpage. One of the fields in the database is a "Note" field, where notes have been entered without any HTML code to format the text. When I display the notes on a webpage, I want to preserve the line breaks and paragraphs as they were typed. Since there are no <br> line break nor <p> paragraph tags on the page, I could display the text as typed using the pre tag, but the problem with just using that tag is that in cases where the a line is very long, someone would have to scroll far to the right to see the entire line on the webpage, if I just used the pre tag. However, I can specify a style for the pre tag that will result in the text wrapping at the right-edge of the browser window. E.g. <pre style="white-space: pre-wrap"> . Or, if I don't want the text displayed in the monospaced default font for the pre tag, I can apply the style to the <div> tag, instead. E.g.: <div style="white-space: pre-wrap">. The CSS white-space Property can have the following values that determine how whitespace is treated:

Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

The SQLite database where the data is stored is named CRQ.db and the table in the database where the notes are stored, which is named IDR, has two columns, one containing a date and the other the notes for that date, so I can use the following PHP code to display the data.

Learn Web Design and HTML5 CSS3 in 4 hours
Learn Web Design and
HTML5/CSS3 in 4 hours
1x1 px

   <?php
   $filename   = "/Users/jasmith1/Documents/www/CRQ/CRQ.db"; 
   $query_idr = "SELECT * FROM IDR WHERE CRQ=\"$crq\" ORDER BY Date;";
   $idr_entries = $db_handle->query($query_idr);
   echo "<table>\n";
    while ($idr_row = $idr_entries->fetchArray()) {
       echo "<tr><td>" . $idr_row['Date'] .
            "</td><td><div style=\"white-space: pre-wrap\">" .
             $idr_row['Note'] .  "</div></td></tr>\n";
    }
    echo "</table>\n\n";
    ?>

Related articles:

  1. Using SQLite
  2. Querying an SQLite Database With PHP