Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Is there a way to prevent text going outside this box ?

    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:



    And here is my HTML:

    Code:
    <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:

    Code:
    .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

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    jeddi (02-20-2009)

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks for the advice,


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



    interesting !

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

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •