?
Solved

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

Posted on 2005-05-02
24
Medium Priority
?
13,595 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:dba123
  • 12
  • 8
  • 3
  • +1
24 Comments
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1200 total points
ID: 13915802
you need to set the word-wrap on the <pre>:

<td><pre style=""word-wrap:break-word"">" & fieldname & "</pre></td>"
0
 
LVL 1

Author Comment

by:dba123
ID: 13917536
tried it, still didn't work
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13917995
<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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 12

Accepted Solution

by:
GoofyDawg earned 800 total points
ID: 13931456
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
 
LVL 1

Author Comment

by:dba123
ID: 13932042
>>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
 
LVL 1

Author Comment

by:dba123
ID: 13932052
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13932095
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13932260
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13932300
> 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
 
LVL 1

Author Comment

by:dba123
ID: 13942565
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13943198
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
 
LVL 1

Author Comment

by:dba123
ID: 13974899
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13976597
>  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
 
LVL 1

Author Comment

by:dba123
ID: 14110867
I tried word wrap....doesn't work either.
0
 
LVL 1

Author Comment

by:dba123
ID: 14110868
I mispelled the last post, I meant word wrap, tried it, not working at all.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 14113533
> not working at all.
It works fine.  You porbably have some error somewhere.  Post your code.
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1200 total points
ID: 14113706
> 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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 14114062
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 14114696
> 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
 
LVL 1

Author Comment

by:dba123
ID: 14217953
>>>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
 
LVL 1

Author Comment

by:dba123
ID: 14217956
>>>table-free layout

sorry, cannot do in a corporate environment since not all browsers render CSS the same.
0
 
LVL 1

Author Comment

by:dba123
ID: 14217964
I give up... whatever I do I can't get <pre> to prevent from extending my damn table.
0
 
LVL 1

Author Comment

by:dba123
ID: 14218054
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
 
LVL 1

Author Comment

by:dba123
ID: 14218061
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month13 days, 8 hours left to enroll

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question