Stylesheets - Fill a box with text?

Author

Fill a box with text?

Graeme

2006-04-09, 6:51 pm

Hi there

Yet another daft question.
Can I fill a css defined box with a text character such that the box can be
set to say, 85% page width, and the text character fills the bos to that
width, does not overflow?

Graeme

Els

2006-04-09, 6:51 pm

Graeme wrote:

> Hi there
>
> Yet another daft question.
> Can I fill a css defined box with a text character such that the box can be
> set to say, 85% page width, and the text character fills the bos to that
> width, does not overflow?

How about you just try and see for yourself?
Hint: leave spaces between the characters.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

jim

2006-04-09, 6:51 pm

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'">Justify
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'">OverFlow-Scroll</button>
<button onClick="textholder.style.overflow='auto'">Overflow
Normal(auto)</button></li>
<li>
<button
onClick="textholder.style.overflow='hidden'">OverFlow-hidden</button>
<button onClick="textholder.style.overflow='auto'">Overflow
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'">Letter Spacing
Expanded</button>
<button onClick="textholder.style.letterSpacing='0em'">Letter Spacing
Normal</button>
</li>
<li>
<button onClick="textholder.style.wordSpacing='0.5em'">Word 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>