...

View Full Version : Is there a way to prevent text going outside this box ?



jeddi
02-20-2009, 08:29 PM
Hi,

I have an input into a text box which later gets displayed
in a div that has a border or it.

My problem is this: if a user puts a lot of empty space and returns into the text box
then the text can end up running outside my box. Can I make on ly the text that is in
the box visable and cut off of invisable-ize the spill over ?

Here is an image of the problem:

http://www.expert-world.com/im/test/boxprob01.jpg

And here is my HTML:


<div class="in_box expert03">
<table class="prof_img" cellspacing= '2' cellpadding='8' border='2' >
<tr><td><img alt='second' src='/im/exp_images/<?php echo "$exp_pict" ?>' width="150px" height="150px" ></td>
</tr></table>
<div class="hot04">
<p><?php echo $D_profile; ?></p>
</div> <!-- End div:hot04 -->
</div> <!-- End div:expert03 -->


And the CSS:


.in_box{
border: 1px;
border-style: solid;
border-color: #ccc;
float:left;
text-align: left;
margin: 10px;
}

.expert03{
width:410px;
height:300px;
}

.hot04{
font-size: 12px;
margin: 10px;
}


I hope there is a way to do this -
thanks for any help :)

itsallkizza
02-20-2009, 09:26 PM
Use
overflow: hidden;
in the block element containing the inserted text (it also needs to have a height defined by a height property directly or by a parent element).

Might try getting rid of leading and trailing whitespace in your script as well.

jeddi
02-20-2009, 10:43 PM
Thanks for the advice,


I put the "overflow: hidden" in the hot03 div first and it did this:

http://www.expert-world.com/im/test/boxprob03.jpg

interesting !

Anyway then I tried it in the parent div where the hieght is and
it works fine :thumbsup:

Thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum