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 4 of 4

Thread: Css word wrap

  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css word wrap

    I have the following chunk of code in my web site
    First off, the [.updates . article .main] <div> has the text pushed to to right a couple Em's.
    Second, wordwrap doesn't work. The text is one line that keeps going off into the space to the right of the screen.

    Im using mozilla, firefox, and IE, any ideas?

    EDIT: I've attached an image of the bug
    PHP Code:
    <style>

    .
    updates .article{
        
    positionrelative;
        
    left0em;
        
    width35em;
        
    border-color#555555;
        
    border-stylesolid;
        
    border-width1px;
        
    padding0em;
        
    font-size14px;
        
    margin-bottom2em;
    }
    .
    updates .article .title{
        
    padding0em;
        
    positionrelative;
        
    top0;
        
    left0;
        
    background-color#CCCCCC;
        
    width100%;
        
    cursormovedefualt;
    }
    .
    updates .article .main{
        
    word-wrap: break-word;    
        
    padding-left0em;
        
    padding-top1px;
        
    padding-right.5em;
        
    padding-bottom1px;
    }
    </
    style>

    <
    div class="updates">
    Recent updates:
    <
    br>
    <
    div class="article">
        <
    div class="title">&nbsp;Test article for new site</div>
        <
    div class="main"><pre>
            
    This is where important information will appear.-----------------------------------------------------------------------------------------
        </
    pre></div>
    </
    div>
    </
    div
    Attached Thumbnails Attached Thumbnails Css word wrap-error.jpg  
    Last edited by daler mehndi; 05-16-2005 at 11:08 PM.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    .main pre
    {
    white-space:pre-wrap;
    }
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pre?!!

    Why do you use a pre element to preserve formatting and at the same time want the text to wrap? Why do those rules need three classes in their selector where one would suffice?
    By the way: word-wrap is a proprietary MS property and is not part of the current standards, and by the looks of it doesn't appear -in this form- in the next CSS spec (3) either.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I didn't even see that <pre> tag in there.
    This has been one of those project I've see aside to come back to a few weeks latter.


  •  

    Posting Permissions

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