I have got some plain text in a database and am trying to output it on a page. I have tried using a pre tag with word wrapping on and a width set to 500, but I get a problem with the element still taking up the same amount of room as it did without the word wrapping.<br />
<br />
I would appreciate any help with this<br />
<br />
Thanks<br />
<br />
Russell<br />
<br />
<br />
Code is as follows<br />
<br />
<html><br />
<head><br />
<style><br />
.testpre<br />
{<br />
background-color:#00ff00;<br />
word-wrap:break-word;<br />
width:500px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table border=1 bgcolor=#0000ff><br />
<tr><td><pre class="testpre"><br />
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglongword<br />
</pre></td></tr><br />
</table><br />
</body><br />
</html><!--content-->Hi there russell_g_1,<br />
<br />
Why not forget the <pre> and do this...
<html><br />
<head><br />
<style type="text/css"><br />
<!--<br />
.testpre<br />
{<br />
background-color:#00ff00;<br />
word-wrap:break-word;<br />
width:500px;<br />
padding: 5px;<br />
}<br />
//--><br />
</style><br />
</head><br />
<body><br />
<table border=1 bgcolor=#0000ff><br />
<tr><td class="testpre"> <br />
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglonglonglonglonglonglonglonglonglonglonglonglonglonlonglonglonglonglonglonglonglonglonglongl onglonglonglonglonglonglonglonglonglonglonglonglonglonglonlonglonglonglonglonglonglonglonglonglonglo nglonglongword<br />
</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
coothead<!--content-->because the pre tag retains the formatting of the original text. ie<br />
<br />
a <br />
b<br />
c d<br />
<br />
will still look like this. rather than a b c d<!--content-->that last post of mine wasn't supposed to look like that.<br />
<br />
The example text was meant to have more spaces in it like this.<br />
<br />
a<br />
[space]b<br />
[space][space]c[space][space][space]d<br />
<br />
The pre tag retains this layout<!--content-->that is because there is no such thing as word-wrap:break-word;<br />
<br />
at least not according to this page<br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/indexlist.html">http://www.w3.org/TR/REC-CSS2/indexlist.html</a><!-- m --><br />
<br />
you can't relly expect the browser to break a word in the middle. serverside language is best for this.<!--content-->Hi there scoutt,<br />
<br />
According to Brian Wilson at Index DOT Css (<!-- m --><a class="postlink" href="http://www.blooberry.com/indexdot/css/properties/text/wordwrap.htm">http://www.blooberry.com/indexdot/css/p ... rdwrap.htm</a><!-- m -->){word-wrap: break-word} was in a beta version of IE5.5
<br />
<br />
coothead<!--content-->yeah beta version, although Blooberry is a good resource I tend to believe w3, since they write the standards that the browser supports.<!--content-->I tend to believe w3, since they write the standards that the browser supports.So do I<br />
<br />
coothead<!--content-->I haven't seen that CSS anywhere before, so it looks like it got dropped.<!--content-->
<br />
I would appreciate any help with this<br />
<br />
Thanks<br />
<br />
Russell<br />
<br />
<br />
Code is as follows<br />
<br />
<html><br />
<head><br />
<style><br />
.testpre<br />
{<br />
background-color:#00ff00;<br />
word-wrap:break-word;<br />
width:500px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table border=1 bgcolor=#0000ff><br />
<tr><td><pre class="testpre"><br />
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglongword<br />
</pre></td></tr><br />
</table><br />
</body><br />
</html><!--content-->Hi there russell_g_1,<br />
<br />
Why not forget the <pre> and do this...
<html><br /><head><br />
<style type="text/css"><br />
<!--<br />
.testpre<br />
{<br />
background-color:#00ff00;<br />
word-wrap:break-word;<br />
width:500px;<br />
padding: 5px;<br />
}<br />
//--><br />
</style><br />
</head><br />
<body><br />
<table border=1 bgcolor=#0000ff><br />
<tr><td class="testpre"> <br />
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong longlonglonglonglonglonglonglonglonglonglonglonglonglonglonlonglonglonglonglonglonglonglonglonglongl onglonglonglonglonglonglonglonglonglonglonglonglonglonglonlonglonglonglonglonglonglonglonglonglonglo nglonglongword<br />
</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
coothead<!--content-->because the pre tag retains the formatting of the original text. ie<br />
<br />
a <br />
b<br />
c d<br />
<br />
will still look like this. rather than a b c d<!--content-->that last post of mine wasn't supposed to look like that.<br />
<br />
The example text was meant to have more spaces in it like this.<br />
<br />
a<br />
[space]b<br />
[space][space]c[space][space][space]d<br />
<br />
The pre tag retains this layout<!--content-->that is because there is no such thing as word-wrap:break-word;<br />
<br />
at least not according to this page<br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/indexlist.html">http://www.w3.org/TR/REC-CSS2/indexlist.html</a><!-- m --><br />
<br />
you can't relly expect the browser to break a word in the middle. serverside language is best for this.<!--content-->Hi there scoutt,<br />
<br />
According to Brian Wilson at Index DOT Css (<!-- m --><a class="postlink" href="http://www.blooberry.com/indexdot/css/properties/text/wordwrap.htm">http://www.blooberry.com/indexdot/css/p ... rdwrap.htm</a><!-- m -->){word-wrap: break-word} was in a beta version of IE5.5
<br /><br />
coothead<!--content-->yeah beta version, although Blooberry is a good resource I tend to believe w3, since they write the standards that the browser supports.<!--content-->I tend to believe w3, since they write the standards that the browser supports.So do I
<br /><br />
coothead<!--content-->I haven't seen that CSS anywhere before, so it looks like it got dropped.<!--content-->