Forum Moderators: open

Message Too Old, No Replies

Long String Product Codes Breaking Format

... how do you word wrap without breaking the word?

         

internetheaven

10:35 am on Apr 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



We have a left side <table> column which lists similar products to the one currently being viewed with the text linking to the product page but the column is only supposed to be 150-200 pix wide (marked as 10%). Some product names are much wider than that and the left hand navigation column can end up being half the page with the actual product being crushed to the right. e.g.

Widget Wheel 889384AB/>98873+9EDGPart06/widgetleft
Widget Wheels 889384AB/>98873+9EDGPart06/widgettop
Widget Wheel 889384AB/>98873+9EDGPart09/widgetleft
Widget Wheel 889384AB/>98873+9EDGPart12/widgetoff

how do I make that look like this in the browser:

Widget Wheel 889384AB/>98
873+9EDGPart06/widgetleft
Widget Wheels 889384AB/>9
8873+9EDGPart06/widgettop
Widget Wheel 889384AB/>98
873+9EDGPart09/widgetleft
Widget Wheel 889384AB/>98
873+9EDGPart12/widgetoff

without breaking up the word i.e:

Widget Wheel 889384AB/>98<br>
873+9EDGPart06/widgetleft
Widget Wheels 889384AB/>9<br>
8873+9EDGPart06/widgettop
Widget Wheel 889384AB/>98<br>
873+9EDGPart09/widgetleft
Widget Wheel 889384AB/>98<br>
873+9EDGPart12/widgetoff

I've struggled with this for months, any help would be appreciated.

DrDoc

3:22 pm on Apr 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can't. You would have to break up the word with something ... a break, a space, etc.

doodlebee

7:45 pm on Apr 8, 2006 (gmt 0)

10+ Year Member



Let me guess, this is only happening in IE? If it *is* happening only in IE, put a conditional comment in the head of your document:

<!--[if IE]>
<style type="text/css">
body {word-wrap: break-word;}
</style>
<![endif]-->

This only works for IE, though - "word-wrap" is an IE thing. If it's happening in other browsers, you *could* set the property of the div container that's holding the long URL to "overflow:hidden;" but that will hide the extended part of the URL.

Alternatively, could you not just give different anchor references? For example:

<a href="Widget Wheel 889384AB/>98873+9EDGPart06/widgetleft">Widget Wheel 98873</a>

('course, you'd have to replace that "/>" in the middle of the URL with the HTML entities, so it wouldn't close in the middle of things...)

Then the link would be provided correctly, but the name would be shortened to something understandable.