Using style=""word-wrap:break-word"" with <pre></pre>

It seems as though style=""word-wrap:break-word"" in my <td> tag doesn't work if I have <pre> tags inside that <td> tag such as "<td style=""word-wrap:break-word"" ><pre>" & fieldname & "</pre></td>"

the lines don't break at all after I started using <pre> and my table row spans across pretty length sometimes due to nonbreaking strings.  Is it possible to use both together like this?  maybe this is why
LVL 1
dba123Asked:
Who is Participating?
 
GoofyDawgCommented:
Looks like you're trying to display text in a fixed-width font. You could do something like:

<td style="font: normal 10px Courier New, serif;word-wrap:break-word;">

It's not <pre> but it'll give you a fixed-width font to display code or whatever you need it for.

GoofyDawg
0
 
GrandSchtroumpfCommented:
you need to set the word-wrap on the <pre>:

<td><pre style=""word-wrap:break-word"">" & fieldname & "</pre></td>"
0
 
dba123Author Commented:
tried it, still didn't work
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
COBOLdinosaurCommented:
<pre> means preformatted.  It tells the browser to preserve formatting, the primary function of the pre tag is the preservation of white space.  That is what it is for. You can modify presentation, but not structure because the structure is what defines the tag.  It would no longer be a pre tag if you change the way it treats white space You need to use a different tag because it does not sound like you want the behaviour of a pre tag.

What is it you want from the pre tag if you don't want white-space preservation?

Cd&
0
 
dba123Author Commented:
>>What is it you want from the pre tag if you don't want white-space preservation?

Because some of the descriptions have non breaking text still due to the nature of the posts being in a software support environment.  I want those broken up but still maintain whitespace
0
 
dba123Author Commented:
we get support cases from customers where the code pasted in has very long strings due to errors they might get with our software.  So that drags my html column of course way to the right.  I want to preserver the post whitespace but at the same time I need a way that overrides extremely long strings somehow so I can maintain the width of my  html table to the width I want.

So basicall I want to tell the table width to be something like 50% but at the same time preserver the whitespace but then if any nonbreaking text goes beyond the 50%, break it.
0
 
COBOLdinosaurCommented:
Not going to happen on the client cross-browser you really need to fix it on the server, or use overflow on the container to manage what happens to the long lines:

overflow:visible will alow the text to render outside the box --- can get really ugly
overflow:hidden will truncate the long lines
overflow:auto will make the container scrollable.

However using an old fashioned table based layout will reduce your flexibility, because table elements are  designed to size to content.

Cd&

0
 
GrandSchtroumpfCommented:
My first solution works fine... but of course it only works in IE because word-wrap is an IE-only.
For mozilla, you can use "white-space:-moz-pre-wrap".
This is the complete code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body>

<pre style="word-wrap:break-word; white-space:-moz-pre-wrap">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam sollicitudin.
      Quisque aliquet, tellus at vehicula convallis, augue lacus porttitor odio, vitae eleifend sem odio a metus.
    Nam leo lorem, porttitor in, tempus et, pretium sit amet, dui.
  Donec urna turpis, viverra in, lobortis id, malesuada ut, erat.
  Vivamus interdum. Etiam aliquam. Etiam eget justo et purus eleifend imperdiet. Phasellus luctus ante a tellus. Donec tincidunt augue eu augue. Vivamus turpis est, dictum vel, malesuada sed, condimentum non, sem. Aenean euismod. Mauris non neque. Morbi vel nibh. Duis sed est. Morbi ac magna. Donec felis leo, gravida non, porttitor eget, condimentum at, orci.
</pre>

</body>
</html>
0
 
GrandSchtroumpfCommented:
> the code pasted in has very long strings
word-wrap changes wrapping between words and not inside words.
if you want wrapping inside words, you need to use this (IE only): word-break: break-all;
0
 
dba123Author Commented:
ok, I just noticed that not all posts that are widening my column are due to nonbreaking space.  The words that are going out do have spaces between but nothing is making them return to the next line.

this is impossible unless I can find some way to get around all this crap.

see the pic here as my column pretrudes out to the right:

http://f2.pg.briefcase.yahoo.com/bc/dba332211/vwp2?.tok=bcCRvRVBeKKtykDk&.dir=/EE&.dnm=notbreaking.gif&.src=bc

and the code:

Response.Write("<td valign=""top"" colspan=""2""><pre style=""word-wrap:break-word"">" & desc & "</pre></td>" & vbCrLf)

I tried break-all, no luck aslo.

0
 
GrandSchtroumpfCommented:
If your desc contains "nbsp;", i'm afraid "word-wrap" won't work.
You should replace all "nbsp;" with normal spaces.

> I tried break-all, no luck aslo.
Note that it's "word-break: break-all" and not "word-wrap: break-all"
0
 
dba123Author Commented:
word-break: break-all doesn't work.  It's not that there are no spaces in the line, just that the line extends out even with spaces when using <pre></pre> around the fieldname
0
 
GrandSchtroumpfCommented:
>  word-break: break-all doesn't work.

That's what i said in my last post.
It is   "word-WRAP: break-all"
You need to replace the "break" with the "wrap"
0
 
dba123Author Commented:
I tried word wrap....doesn't work either.
0
 
dba123Author Commented:
I mispelled the last post, I meant word wrap, tried it, not working at all.
0
 
GrandSchtroumpfCommented:
> not working at all.
It works fine.  You porbably have some error somewhere.  Post your code.
0
 
GrandSchtroumpfCommented:
> not working at all.
I think your problem is the table.
Tables are made to expand when their content expands, so trying to control the "overflow" behaviour vain when there is no overflow in the first place.
Tables are impossible to control... with "table-layout: fixed" it's a little better, but still it's never 100% right.
You can set a width on your <pre>, and see if you get the correct wrapping behaviour.  In which case you know that it's the table that is a problem:

Response.Write("<td valign=""top"" colspan=""2""><pre style=""border:2px solid red; width: 300px; word-wrap:break-all"">" & desc & "</pre></td>" & vbCrLf)
0
 
COBOLdinosaurCommented:
I know don't why you are playing around with IE only properties that don't work most of the time, but I guess we all find our own way to waste time... alchemist turning lead to gold.

word-wrap according to msdn:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wordwrap.asp


word-break according to msdn:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wordbreak.asp

What both fail to mention is that IE 6 and IE 5.% don't necessaryilly render the same but M$ doesn ot list any bugs.  Of course we all know if M$ says there are no bugs then it must be working perfectly.  


As for white-space:-moz-pre-wrap  ...  I guess if you are going to use non-standard code that will jam you up down the road yo might as well mess up FF as well, the the pages get to be screwed usp twice as the manufactures drop drop support of change how it works on whim.  This is still in design?  Why not do a design that works withinthe sandards so you don't have to keepcoming back to fix it.  Maintenance is booooooooooring... but is is all you ever get to do, if you don't build for the future.

Cd&
0
 
GrandSchtroumpfCommented:
> I know don't why you are playing around with IE only properties that don't work most of the time, but I guess we all find our own way to waste time... alchemist turning lead to gold.

Lol.  Indeed, using a table-free layout would simply display the overflowing text without messing up the complete page.
I just like to play with these proprietary properties, but i don't use them much myself (except for the -moz-border-radius).
I don't think it's wrong to use them as enhancments, but of course the layout should NEVER rely on those.

The CSS 2.1 syntax is the following:
  white-space: pre-wrap;

But it's not yet supported, so why not using some proprietary equivalent that does exactly the same thing?

The problem is that it's that one property cannot have 2 different values, so we cannot use both the official CSS syntax and the proprietary syntax without using hacks...  Or maybe it's possible and you'll teach me something.
  Like this?  white-space: pre-wrap -moz-pre-wrap -o-pre-wrap;
  Or this?  white-space: pre-wrap, -moz-pre-wrap, -o-pre-wrap;
  Or if i declare them one after the other, the browser might only use those that it knows.
0
 
dba123Author Commented:
>>>I guess if you are going to use non-standard code that will jam you up down the road yo might as well mess up FF as well, the the pages get to be screwed usp twice as the manufactures drop drop support of change how it works on whim.  This is still in design?  Why not do a design that works withinthe sandards so you don't have to keepcoming back to fix it.  Maintenance is booooooooooring... but is is all you ever get to do, if you don't build for the future.

Please explain, I don't understand what you are talking about.  are you saying to create perfect HTML code?  OR not use CSS, or not use tables?  please elaborate.
0
 
dba123Author Commented:
>>>table-free layout

sorry, cannot do in a corporate environment since not all browsers render CSS the same.
0
 
dba123Author Commented:
I give up... whatever I do I can't get <pre> to prevent from extending my damn table.
0
 
dba123Author Commented:
FINALLY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Response.Write("<td valign=""top"" colspan=""2"" style=""word-wrap:break-word;""><pre style=""width: 700px; word-break:break-all;"">" & desc & "</pre></td>" & vbCrLf)


THIS WORKS!!

THANK YOU EVERYONE, I CAN NOW REST
0
 
dba123Author Commented:
ALSO this did have to be added in conjunction with the above as a whole solution here

Response.Write("<table border=""0"" bordercolor=""red"" cellspacing=""1"" cellpadding=""3"" class=""tableoutside"" width=""100%"" STYLE=""table-layout:fixed"">" & vbCrLf)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.