White-space formatting concerns in HTML
Question
My selected data contains (can be a long string and 'white-space' in it),
example:
$row['desc'] = 'abcd ABCD 1234 more.. "
<td><?=$row['desc']?></td>
But When I display it in an HTML table in the browser I don't see the white-space formatted like in the database. I want to preserve formatting from the database.
In FireBug I see exactly the same data formatting as in Database.
[*] To preserve the format like Selected data and I tried
$display_desc = array(" "," ",$row['desc'])
and my $row['desc'] is dynamic string
But If I do like will have a problem when the $row['desc'] long string it does not wrap.
Anyone know what is the problem in this case ?
Thanks
EDIT Example in HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test Document</title>
</head>
<body>
<table border="1">
<tr>
<td>Short data</td>
<td style="WORD-BREAK:BREAK-ALL;">
long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data
</td>
<td style="WORD-BREAK:BREAK-ALL;">
long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data data long data long data long data long data long data long data long data
</td>
</table>
</body>
</html>
3 answers
solution1
2 ACCPTED 2011-11-17 20:22:52
Wrap in a <pre> tag then apply some css: How do I wrap text in a pre tag?
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Demo with your sample html: http://jsfiddle.net/B98jc/
solution2
1 2011-11-17 19:30:09
Browsers turn two or more regular spaces into a single space.
Using a non-breaking space ( ) instead tells the browser to render all of the space characters. If you're having trouble with wrapping, you can control that with CSS. But remember that the browser wants to break the string up on things that can actually break, like regular spaces. You might have to insert a regular space in the midst of those non-breaking spaces (or use some fancy JavaScript) to control the wrapping.
With that said, it seems like you want to build a table structure that mimics what's coming from the database. Putting the entire string from your $row record into a single table cell doesn't really solve that problem. Your data looks like it's in a fixed-width format, so you might need to loop through each row of data and take the first x characters for the first column, the next x characters for the second column, and so forth.
solution3
0 2011-11-17 20:06:39
Why don't you just wrap the output in <pre> tags? That will preserve your existing formatting.
Is there a problem with going that route? Or do you need to replace the spaces?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.