Here's a javascript style changer I just made for ya... copy and paste
into an html file; you'll be able to click the buttons and visually see
the different effects that the style changes have on the text inside
the div box. -Jim
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>textSpacing CSS PlayGround</title>
<style type="text/css">
hr {color:white; width:70%; height:15px; text-align:center;
border-top:5px brown groove}
body {margin:5px; padding:0px; font-size:1em}
button{background:brown; color:white; border:2px yellow ridge;
font-size:8pt; width:135px; margin-left:10px;}
ul {padding-left:10px; border-left: 5px navy double;}
li {list-style:none; margin-left:20px; margin-bottom:4px; width:290px;
padding-bottom:3px;}
</style>
</head>
<body>
<h3>
Click the buttons in different sequences to change the width and text
setup of the div box below (within the navy dashed lines)</h3>
<ul>
<li><button onClick="textholder.style.textAlign='justify'">Jus tify
Text</button>
<button
onClick="textholder.style.textAlign='left'">Text-Align:left</button></li>
<li>
<button onClick="textholder.style.width='85%'">Shrink Div Width to
85%</button>
<button onClick="textholder.style.width='100%'">100% Div
Width</button></li>
<li>
<button
onClick="textholder.style.overflow='scroll'">OverF low-Scroll</button>
<button onClick="textholder.style.overflow='auto'">Overflo w
Normal(auto)</button></li>
<li>
<button
onClick="textholder.style.overflow='hidden'">OverF low-hidden</button>
<button onClick="textholder.style.overflow='auto'">Overflo w
Normal(auto)</button></li>
<li>
<button onClick="textholder.style.height='65px'">Shrink Div Height to
25px</button>
<button onClick="textholder.style.height='180px'">Div height
180px</button></li>
<li>
<button onClick="textholder.style.letterSpacing='0.5em'">L etter Spacing
Expanded</button>
<button onClick="textholder.style.letterSpacing='0em'">Let ter Spacing
Normal</button>
</li>
<li>
<button onClick="textholder.style.wordSpacing='0.5em'">Wor d Spacing
Expanded</button>
<button onClick="textholder.style.wordSpacing='0em'">Word Spacing
Normal</button>
</li></ul>
<h4>The style settings for textbox below: border:1px navy dashed;
position:absolute; left:0px; top:310px; overflow:auto</h4>
<div id="textholder" style="border:1px navy dashed; position:absolute;
left:0px; top:310px; overflow:auto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam neque.
Duis cursus dapibus enim. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Sed lorem quam,
faucibus a, porta a, vestibulum ac, enim. In
imperdiet mauris. Vestibulum mollis convallis nibh. Sed erat libero,
vulputate sed, sagittis a, faucibus id, ipsum. Vestibulum ante elit,
convallis ut, convallis id, lobortis nec, magna. Suspendisse quis urna
quis est condimentum ultricies. Integer pellentesque libero eget
sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. </div>
</body>
