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(" ","&nbsp;",$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>

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

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/

edited May 23 '17 at 12:11

Community

1
1

answered Nov 17 '11 at 20:22

Davy8

30,868
25
115
173

Cᴏʀʏ · Answer 2 · 2011-11-17T19:35:38.833

1

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.

edited Nov 17 '11 at 19:35

answered Nov 17 '11 at 19:30

Cᴏʀʏ

105,112
20
162
194

so I have removed the whitspce to but if there is long string ,will have a problem ,the text not wrap .how can I solve this.Thanks – sophie Nov 17 '11 at 19:33
@Transformer: Read my edit. The browser needs something in the string to actually break on, it won't break on non-breaking characters. You could maybe trick the browser by replacing the single spaces with something like `` and use some CSS (`.spacer { display: inline-block; width: 5px; }`) so each `` is about 1 character wide. The browser would then wrap the content as desired and make it appear to have spaces. – Cᴏʀʏ Nov 17 '11 at 19:42
I did not really understand ,I edited my question with the real html code,and thank for your help . – sophie Nov 17 '11 at 20:03

score 0 · Answer 3 · answered Nov 17 '11 at 20:06

0

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?

answered Nov 17 '11 at 20:06

Jakub

20,418
8
65
92

if there is long string in your long data the data should be wrap automatically. – sophie Nov 17 '11 at 20:10
@Transformer, on what condition would you wrap? Wrapping ultimately destroys your formatting, the very thing you don't want. Please clarify. – Jakub Nov 17 '11 at 20:19
@Jakub I think he wants the same behavior as if you pasted the text into Notepad with wordwrap on. It preserves the spaces but still wraps. – Davy8 Nov 17 '11 at 20:24
@Davy8, ok well that makes sense then, he didn't really specify 'word-wrap' as a requirement initially. Just that he didn't want to loose formatting. Good Answer +1 from me. – Jakub Nov 17 '11 at 22:00

White-space formatting concerns in HTML

3 Answers3