DIV command, text expanding the width larger than its setting. yeeks [Archive]

View Full Version : DIV command, text expanding the width larger than its setting. yeeks

Steven_Smith

02-21-2003, 05:58 PM

<div style="background-color: #000066; padding-top: 10px; padding-left: 6px; padding-bottom: 10px; padding-right: 4px; border-top: 1px solid #FF9900; border-right: 1px solid #FF9900; border-left: 1px solid #FF9900; width: 125px; max-width: 125px">
<font face="arial, helvetica, sans" color="#FFFFFF" size="2"><strong>xxxxxxxxxxxxxxxxxxxxxxxxxx</strong></font>
</div>

This is my code. the problem is that if a word is larger than 125px, then it expands the width of the box. Which is no good. How can I make the word break apart?

The text is dynamic, so I do not know how big it would be.

Thanks for any help
Steve :)

Roy Sinclair

02-21-2003, 07:55 PM

The browsers won't break a word apart, you can either expect the div to increase in size or you can set it up so anything that overflows the defined size is simply not displayed.

<rant>
Why on earth are you using <font>? You have a style sheet on that <div> already so why not put the rest of the text styles into that style sheet and rid your document of obsolete tags?

Is this an artifact of another one of those collosally ignorant GUI editors?
</rant>

Steven_Smith

02-21-2003, 07:58 PM

HEHE

thaks Roy, whew, ya thats some bad HTML on my part. I should have put the font info in the DIV tag. My bad. Thanks for pointing it out.

I write my code by hand, using BBEDIT.

:thumbsup:

Catman

02-21-2003, 09:11 PM

You can, to some degree, get the width to expand as font size expands by using em or ex as your unit of measure for the div width. In general, if it works more or less as expected for the largest and smallest sizes, it will work for pretty much everything inbetween.

Steven_Smith

02-21-2003, 09:13 PM

I came up with this so far

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<pre>
<?

$string="Alphabetsoupcomany";

echo $string."<BR>";

$string = preg_split('//', $string, -1, PREG_SPLIT_NO_EMPTY);

$j=0;
while (list($key, $val) = each($string) ) {

$string[$j]=$string[$j]." ";

$j++;
}

print_r($string);
$string=implode("",$string);

echo "<BR>".$string;

?>
</pre>

<div style="background-color: #000066; padding-top: 10px; padding-left: 6px; padding-bottom: 10px; padding-right: 4px; border-top: 1px solid #FF9900; border-right: 1px solid #FF9900; border-left: 1px solid #FF9900; width: 125px; font: 12px arial; color: #FFFFFF">
<strong>Why <span style="letter-spacing: -1.5px"><? echo $string ?></span>  has chosenus:</strong>
</div>

Kinda Works.!