spacer
Yehuda Shiran August 24, 2000
Breaking a Long Line
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

It is sometimes very annoying to have to scroll horizontally when the text line is longer than the window's width. Starting from Internet Explorer 5.5, you can control the layout of a text in a container. The style's property you use is whiteSpace:

object.style.whiteSpace = sWordWrapMode;

where sWordWrapMode is one of two options:

  • normal

  • nowrap

The following paragraph (works only in IE 5.5 and up) demonstrates the whiteSpace property. The user can click one of the two links following the paragraph, making it a multi-line (wordwarpped) or a single line (scrolling is needed) paragraph. Play around with the paragraph word wrapping behavior:

Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line

One Line Multi-Line

Here is how we defined the above paragraph and links:

<P ID="longWord" STYLE="word-wrap:break-word; width:100%; left:0">
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
</P>
<A HREF="javascript:void(longWord.style.whiteSpace='normal')">One Line</A>
<A HREF="javascript:void(longWord.style.whiteSpace='nowrap')">Multi-Line</A>

The whiteSpace property applies only to elements that have layout. An element has layout when it is absolutely positioned, is a block element, or is an inline element with a specified height or width. Notice the width specification above to make it an element with layout. The links themselves are straight-forward. You just change the whiteSpace property to the desired value. Notice the usage of void() above. It is necessary to avoid overwriting of the page with the return value from the javascript: call, which is the property assignment value (normal or nowrap).


People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Workers Say Telework Is More Productive, Bosses Not So Sure · Kingston Debuts Power-Saving Memory Upgrades · Social Networking is King: Facebook Edges Google