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

Thread: TD word wrap

  1. #1
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts

    TD word wrap

    I cannot get the word wrap to work on my site, the text is inside a TD, can anyone help?

    Examples:
    http://ludatha.com/forum/category/Spam%20Land/

    http://ludatha.com/forum/post/628-WordWrap/

    Long sentences and long words don't wrap to the next line.

    Code:
    th {background-color:#888; height:30px; color:#111; border-bottom:#666 1px solid; word-wrap:break-word;}
    
    td {padding:5px; background-color:#999; border-bottom:#666 1px solid; word-wrap:break-word;}
    
    table {width:97%; word-wrap:break-word;}

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Ludatha View Post
    I cannot get the word wrap to work on my site, the text is inside a TD, can anyone help?

    Examples:
    http://ludatha.com/forum/category/Spam%20Land/

    http://ludatha.com/forum/post/628-WordWrap/

    Long sentences and long words don't wrap to the next line.

    Code:
    th {background-color:#888; height:30px; color:#111; border-bottom:#666 1px solid; word-wrap:break-word;}
    
    td {padding:5px; background-color:#999; border-bottom:#666 1px solid; word-wrap:break-word;}
    
    table {width:97%; word-wrap:break-word;}
    white-space: normal is used to wrap but don't work in your example because is a single long word and wrap is applied to words, can't split and wrap a word.
    You must use some server side scripting to split or cut the word and/or you can use client side, javascript for example, to disallow posting such thing at validation time. Be aware that javascript can be manipulated and therefor you must also use a server side validation rutine for that.

    best regards

  • Users who have thanked oesxyl for this post:

    Ludatha (11-06-2009)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts

  • #4
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by oesxyl View Post
    white-space: normal is used to wrap but don't work in your example because is a single long word and wrap is applied to words, can't split and wrap a word.
    You must use some server side scripting to split or cut the word and/or you can use client side, javascript for example, to disallow posting such thing at validation time. Be aware that javascript can be manipulated and therefor you must also use a server side validation rutine for that.

    best regards
    Thanks, I wanted to know if there was an easy CSS cheat :P

    So I went for the PHP option, and here is my code if anyone finds this thread with the same problem (from php.net but some modifications)

    PHP Code:
    function wordWrapIgnoreHTML($string$length 45$wrapString "\n"){ 
             
    $wrapped ''
             
    $word ''
             
    $html false
             
    $string = (string) $string
             for(
    $i=0;$i<strlen($string);$i+=1
             { 
               
    $char $string[$i]; 
               
               
    /** HTML Begins */ 
               
    if($char === '<'
               { 
                 if(!empty(
    $word)) 
                 { 
                   
    $wrapped .= $word
                   
    $word ''
                 } 
                 
                 
    $html true
                 
    $wrapped .= $char
               } 
               
               
    /** HTML ends */ 
               
    elseif($char === '>'
               { 
                 
    $html false
                 
    $wrapped .= $char
               } 
               
               
    /** If this is inside HTML -> append to the wrapped string */ 
               
    elseif($html
               { 
                 
    $wrapped .= $char
               } 
               
               
    /** Whitespace characted / new line */ 
               
    elseif($char === ' ' || $char === "\t" || $char === "\n" || $char === "0"
               { 
                 
    $wrapped .= $word.$char
                 
    $word ''
               } 
               
               
    /** Check chars */ 
               
    else 
               { 
                 
    $word .= $char
                 
                 if(
    strlen($word) > $length
                 { 
                   
    $wrapped .= $word.$wrapString
                   
    $word ''
                 } 
               } 
             } 
        
            if(
    $word !== ''){ 
                
    $wrapped .= $word
            } 
             
             return 
    $wrapped
        } 

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Ludatha View Post
    Thanks, I wanted to know if there was an easy CSS cheat :P

    So I went for the PHP option, and here is my code if anyone finds this thread with the same problem (from php.net but some modifications)

    PHP Code:
    function wordWrapIgnoreHTML($string$length 45$wrapString "\n"){ 
             
    $wrapped ''
             
    $word ''
             
    $html false
             
    $string = (string) $string
             for(
    $i=0;$i<strlen($string);$i+=1
             { 
               
    $char $string[$i]; 
               
               
    /** HTML Begins */ 
               
    if($char === '<'
               { 
                 if(!empty(
    $word)) 
                 { 
                   
    $wrapped .= $word
                   
    $word ''
                 } 
                 
                 
    $html true
                 
    $wrapped .= $char
               } 
               
               
    /** HTML ends */ 
               
    elseif($char === '>'
               { 
                 
    $html false
                 
    $wrapped .= $char
               } 
               
               
    /** If this is inside HTML -> append to the wrapped string */ 
               
    elseif($html
               { 
                 
    $wrapped .= $char
               } 
               
               
    /** Whitespace characted / new line */ 
               
    elseif($char === ' ' || $char === "\t" || $char === "\n" || $char === "0"
               { 
                 
    $wrapped .= $word.$char
                 
    $word ''
               } 
               
               
    /** Check chars */ 
               
    else 
               { 
                 
    $word .= $char
                 
                 if(
    strlen($word) > $length
                 { 
                   
    $wrapped .= $word.$wrapString
                   
    $word ''
                 } 
               } 
             } 
        
            if(
    $word !== ''){ 
                
    $wrapped .= $word
            } 
             
             return 
    $wrapped
        } 
    if it work as you expect is perfect, A note, is better to not mix code for two things in the same function, in this case removing html and word wrap, the probability to need one of them in another place is bigger then to need both, so you can reuse the code in other place on the site.

    best regards


  •  

    Posting Permissions

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