I have to render some text to a web page. The text is coming from sources outside my control and it is formatted using newlines and tab charact开发者_如何学JAVAers.
New lines (\n)
can be replaced by br
tags, but what about preserving tabs? A brief search reveals there is no way to directly render tab characters in HTML.
Why not just wrap the content in a <pre>
tag? This will handle the \n
as well as the \t
characters.
An alternative to the non-breaking space would be the em space ( 
or  
). It is usually rendered as a longer space, if that is an advantage.
A Quick & Dirty Way
For a quick fix, you can use the xmp
tag to stop the browser from collapsing whitespace. The xmp
tag contains text that should be rendered uninterpreted (and in a monospaced font).
The problem is that xmp
tags have been deprecated since HTML3.2, and have been dropped from the HTML5 spec altogether. In practice, browsers still support xmp
tags, so they can still be useful, but not in production.
The Proper Way
Tabs are for tabulating data. The proper way to tabulate data in HTML is to use the table
tag. Every line in your original string translates to a row in the table, while each tab in the original string starts a new (left-aligned) cell in the table.
Imagine you had this (tab-aligned) string to begin with:
Spam 1.99
Cheese 2.99
Translated to HTML, that string would look like this:
<table>
<tr> <td> Spam </td> <td> 1.99 </td> </tr>
<tr> <td> Cheese </td> <td> 2.99 </td> </tr>
</table>
Note: If you wrapped the tab-aligned string in xmp
tags and styled the HTML table to look like plain text, the rendered results would be the same.
replace \t
with
.
Each space you want will be a
As pointed out this isn't completely correct as it only pretends to be a tab as HTML doesn't actually output format a tab as you would expect.
If you're already replacing line breaks, why not do the same for tabs...?
str_replace("\t", ' ', $text);
 
,  
,  
or  
can be used.
W3 says little about this...
The character entities   and   denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.
Read More at W3.org fro HTML3
Read More at W3.org for HTML4
Even more at Wikipedia (about spaces)
精彩评论