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.
<?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: