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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    wrap text on space break not max length

    I have a button class which is 8em. The text inside varies but I want to wrap it if the length is larger than the button width.

    I have tried
    Code:
     overflow:hidden;
    OR
    word-wrap:break-word;
    But if I have the name Albert Einstein it will wrap like this:
    Albert Ein
    stein

    when I would like it to wrap like this
    Albert
    Enstein

    However I only want it to wrap if the name is longer than 8em I don't want to change all buttons to two rows if the name can fit on one.

    I figure I could do a long winded count string length, if string length is greater than x replace ' ' with '<br />';

    But that seems very long winded and I was wondering if there was a way to code my wrap command differently to achieve what I wanted?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Jenny Dithe,
    Can we see your code? I'm having trouble reproducing your problem and I'd like to see why your text would break where there is no space. That is not a normal behaviour.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Jenny Dithe View Post
    But that seems very long winded and I was wondering if there was a way to code my wrap command differently to achieve what I wanted?
    Look at this example of a menu with a set width button and more than one line of text.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Jenny Dithe (04-14-2011)

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    My css is:
    Code:
    .button10:hover {border:none; background-color:#778899;  font-size:100%; text-decoration:underline; color:#7D66C7; font-weight:bold; width:10em; word-wrap:break-word;}
    And then the button is:
    Code:
    echo '<input type="button" class="button10" value=" ' . $row['name'] . ' " />';
    The menu is how I want my page to look, but looking at the source code they achieve that by using <span> which is fine if I know how long each name is going to be, but the name is the username of members so could be as long as they like.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    If you just remove word-wrap:break-word; the default "normal" should break at a space like you would expect... I think.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Jenny Dithe (04-16-2011)

  • #6
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    I have my css like this:
    Code:
    .button10 {border:none; background-color:#fff8dc;  font-size:100%; text-decoration:none; color:#7D66C7; font-weight:bold; width:80%;}
    .button10:hover {border:none; background-color:#778899;  font-size:100%; text-decoration:underline; color:#7D66C7; font-weight:bold; width:80%;}
    So I removed the wrap. The problem is it is not breaking breaking in to two lines when it reaches 80% width, so if I shrink my screen the button sticks out into the neighbouring div, keeping its size the length of the name, and looking very messy.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Jenny Dithe View Post
    I have my css like this:
    Code:
    .button10 {border:none; background-color:#fff8dc;  font-size:100%; text-decoration:none; color:#7D66C7; font-weight:bold; width:80%;}
    .button10:hover {border:none; background-color:#778899;  font-size:100%; text-decoration:underline; color:#7D66C7; font-weight:bold; width:80%;}
    So I removed the wrap. The problem is it is not breaking breaking in to two lines when it reaches 80% width, so if I shrink my screen the button sticks out into the neighbouring div, keeping its size the length of the name, and looking very messy.
    You're still not giving enough information. The CSS you have quoted here does not reproduce the problem you're seeing.
    80% width is probably pretty wide? We can't know since you don't show us the parent.

    Look at this example with a 20% width anchor to limit the width and force a line break -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    	font: 100% Verdana, Geneva, sans-serif;
    }
    #container {
    	width: 700px;
    	margin: 30px auto;
    	padding: 50px;
    	background: #999;
    }
    .button10 {
    	width: 20%;
    	display: block;
    	border: none;
    	background: #fff8dc;
    	font-size: 2em;
    	text-decoration: none;
    	color: #7D66C7;
    	font-weight: bold;
    }
    .button10:hover {
    	background: #778899;
    	text-decoration: underline;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<a href="#" class="button10">Albert Einstein</a>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Jenny Dithe (04-16-2011)

  • #8
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Oh crap. I think I have made a big mistake then.

    My style sheet is like this(scroll down to the bottom to find button 10):
    Code:
    body 
    	{
    	background-color:#ac5746; height:100%
    	}
    
    body.background2 
    	{
    	background-color:#fffacd; height:100%
    	}
    
    hr {color:navy}
    hr.two {color:#336699}
    
    .banner{position:relative; z-index:1;}
    .header{position:absolute;top:10px;right:10px;z-index:2;}
    
    h1 {text-align:center}
    h1,h2,h3,h4,h5{font-family:"Times New Roman"; margin-left:40px}
    p {font-family:"Times New Roman";  font-size:90%; margin-left:50px; margin-right:50px}
    p.small {font-size:0.75em; text-align:center}
    p.termlist {font-family:"Times New Roman";  font-size:90%; margin-left:50px; margin-right:50px text-align:left; margin-left:40px; margin-right:40px;}
    p.terms {font-family:"Arial"; font-size:0.85em; font-weight:normal; text-decoration:none; text-align:left; margin-left:15px; margin-right:15px}
    p.italic {font-size:0.75em; text-align:left; margin-left:45px}
    p.hidden {visibility:hidden}
    b.post {color:#7D66C7;}
    b.stamp {color:#989898;}
    h6 {width:100%; position:absolute;top:10px;z-index:2; font-family:Arial; font-size:70px; color:white; text-align:center; text-transform:uppercase}
    a:link {color:#778899}
    a:visited {color:#800080}
    a:hover {color:#7B68EE}
    a:active {color:#228B22} 
    p.times {font-family:"Times New Roman"; margin-left:50px; margin-right:50px}
    p.arial {font-family:"Arial"; margin-left:50px; margin-right:50px}
    p.verdana {font-family:"Verdana"; margin-left:50px; margin-right:50px}
    p.apple {font-family:"Apple Chancery"; margin-left:50px; margin-right:50px}
    p.italic {font-family:"Times New Roman"; font-style:italic; margin-left:50px; margin-right:50px}
    .input {font-size:100%;border:1px solid #006699; background:#ffffcc; margin-left:1em; width:50%;}
    .input:hover {border:1px solid #f00000; background: #ffff66; width:50%;}
    .msearch {font-size:100%;border:1px solid #006699; background:#ffffcc; width:70%; margin-right:10%;}
    .msearch:hover {border:1px solid #f00000; background: #ffff66; width:70%; margin-right:10%;}
    .invite {border:none; background:none; margin-left:1em}
    .invite:hover {border:none; background: #ff6;}
    
    .button {border:1px solid #484848; background:#c0c0c0; font-size:100%;}
    .button2 {border:none; background:#fff8dc;font-size:100%;}
    .button3 {background-color:black; font-size:100%; text-decoration:none; color:white; border:1px solid #f00000; width:10em}
    .button3:hover {background-color:#778899; font-size:100%; text-decoration:none; color:white; border:2px solid #f00000; width:10em}
    .button4 {background-color:black; font-size:100%; text-decoration:none; color:white; border:1px solid #f00000}
    .button4:hover {background-color:#778899; font-size:100%; text-decoration:none; color:white; border:2px solid #f00000}
    .button5 {background-color:#ffffb5; font-size:100%; text-decoration:none; color:black; border:none}
    .button5:hover {background-color:#778899; font-size:100%; text-decoration:none; color:white; border:none}
    .button6 {border:none; background-color:#fff8dc; font-size:100%; text-decoration:underline; color:#7D66C7; font-weight:bold;}
    .button7 {border:none; background-color:#fff8dc; font-size:100%; text-decoration:none; color:black; width:10em}
    .button7:hover {border:none; background-color:#fff8dc; font-size:100%; text-decoration:underline; color:black; width:10em}
    .button8 {border:1px solid #e0c200; background-color:black; font-size:100%; text-decoration:none; color:#ffffb8; width:80%}
    .button8:hover {border:2px solid #e0c200; background-color:black; font-size:100%; text-decoration:underline; color:#ffffb8; width:80%}
    .button9 {border:none; background-color:#ffffb5;  font-size:100%; text-decoration:underline; color:#7D66C7; font-weight:bold; width:80%;}
    .button10 {border:none; background-color:#fff8dc;  font-size:100%; text-decoration:none; color:#7D66C7; font-weight:bold; width:80%;}
    .button10:hover {border:none; background-color:#778899;  font-size:100%; text-decoration:underline; color:#7D66C7; font-weight:bold; width:80%;}
    Then one example where it messes up is:
    PHP Code:
    <body>
        <table width="100%">
        <tr>
        <td width="70%" valign="top">
        <div class="standard">
    <?php

    include("dbconnect.php");
     
     
            
    $result mysql_query("SELECT COUNT(*) as count FROM friends 
            WHERE statae='accepted' AND (invited='{$SThisPId}' OR invitee='{$SThisPId}') "
    );
     
                
    $rowmysql_fetch_assoc($result);{
                echo 
    "" $row['count'] . " friends";
                }    
     
            
    mysql_close($con);
    ?>
        <br />
        <br />
            <ul>
                <li><a href="#a">A</a></li>
                <li><a href="#b">B</a></li>
                <li><a href="#c">C</a></li>
                <li><a href="#d">D</a></li>
                <li><a href="#e">E</a></li>
                <li><a href="#f">F</a></li>
                <li><a href="#g">G</a></li>
                <li><a href="#h">H</a></li>
                <li><a href="#i">I</a></li>
                <li><a href="#j">J</a></li>
                <li><a href="#k">K</a></li>
                <li><a href="#l">L</a></li>
                <li><a href="#m">M</a></li>
                <li><a href="#n">N</a></li>
                <li><a href="#o">O</a></li>
                <li><a href="#p">P</a></li>
                <li><a href="#q">Q</a></li>
                <li><a href="#r">R</a></li>
                <li><a href="#s">S</a></li>
                <li><a href="#t">T</a></li>
                <li><a href="#u">U</a></li>
                <li><a href="#v">V</a></li>
                <li><a href="#w">W</a></li>
                <li><a href="#x">X</a></li>
                <li><a href="#y">Y</a></li>
                <li><a href="#z">Z</a></li>
            </ul>
        <br />
        <br />
        </div>
        <br />
        <br />
        </td>
        <td width="30%">&nbsp;
        </td>
        </tr>
        <tr>
        <td valign="top">
    <?php

    include("dbconnect.php");
     
     
            
    $result mysql_query("SELECT * FROM privacy
            WHERE PId={$SThisPId}"
    );
            
                while(
    $row mysql_fetch_array($result)){
                    
    $update=$row['updatesstatus'];
                    
    $friends=$row['friendsstatus'];
                    
    $location=$row['locationstatus'];
                    
    $routeplanner=$row['routeplannerstatus'];
                    }

            
    $result mysql_query("SELECT * FROM friends
            WHERE ((invitee={$SThisPId} AND invited={$SMyPId}) OR (invited={$SThisPId} AND invitee={$SMyPId}))"
    );
            
                while(
    $row mysql_fetch_array($result)){
                    
    $statae=$row['statae'];
                    }

                if ((
    $SMyPId==$SThisPId) OR ($friends='everyone') OR ($friends='friends' AND $statae='accepted')){
        
        echo 
    '<div class="standard">
        <div>
        <div class="left">'
    ;


            echo 
    '<a name="a"><big><b>A</b></big></a>';echo '<br />';echo '<br />';



     

                
    $result mysql_query("SELECT * FROM allusers INNER JOIN friends
                ON friends.invitee=allusers.PId OR friends.invited=allusers.PId WHERE allusers.PId !={$SThisPId} AND ((friends.invited={$SThisPId} AND friends.statae='accepted')
                OR 
                ( friends.invitee={$SThisPId} AND friends.statae='accepted'))
                AND allusers.fullname > 'a' AND allusers.fullname < 'b'
                ORDER BY allusers.fullname DESC"
    );
                
                echo 
    '<table>';
                
                while(
    $row mysql_fetch_array($result)){
                        echo 
    '<tr>';
                        echo 
    '<td><img src="thumbs/' $row['pphoto'] . '" class="thumbnail" /></td>';
                        
    $carnation="{$SMyPId};{$row['PId']};Profile.php";    
                        echo 
    '<td><input type="button" class="button10" value="' $row['fullname'] .'" onclick="document.location=\'AltSess.php?Pipi=' urlencode($carnation) . '\'" />';
                        echo 
    '<br /><br />' $row['occupation'] . '</td>';
                        echo 
    '</tr>';
                        }
                    echo 
    '</table>';
                
                

        echo 
    '<br />';
        echo 
    '<br />';
    I know tables are frowned upon but in this situation it worked better than a div - this is where you tell me it is because of the table It does also mess up when contained in a div.

    So in the above I want the button to be 80% of the width of the td which is 70% of the width of the screen. All fine and good in a large full screen but if you reduce the size of the screen the button starts popping out the end of the td.

    Another example where it messes up is when contained in a div:
    Code:
    <body>
    			<a name="top"></a> 
    <div>
    	<div class="left">
    	<div class="standard" name="box">
    <?php
    
    include("dbconnect.php");
     
    			$result = mysql_query("SELECT * FROM allusers
    			WHERE PId = '{$SMyPId}'");
    
    			while($row=mysql_fetch_array($result)){
    				$companion1=$row['companion'];
    				$companion2=$row['companion2'];
    				$companion3=$row['companion3'];
    				}
    
    			$result = mysql_query("SELECT * FROM allusers
    			WHERE PId = '{$companion1}' ");
    
    			while($row=mysql_fetch_array($result)){
    				$travel1=$row['fullname'];
    				}
    
    			$result = mysql_query("SELECT * FROM allusers
    			WHERE PId = '{$companion2}' ");
    
    			while($row=mysql_fetch_array($result)){
    				$travel2=$row['fullname'];
    				}
    
    			$result = mysql_query("SELECT * FROM allusers
    			WHERE PId = '{$companion3}' ");
    
    			while($row=mysql_fetch_array($result)){
    				$travel3=$row['fullname'];
    				}
    
    			$result = mysql_query("SELECT * FROM allusers
    			WHERE PId = '{$SMyPId}'");
    
    
    			while($row=mysql_fetch_array($result)){
    					$myccountry=$row['ccountry'];
    					$myncountry=$row['ncountry'];
    
    					echo '<div><div class="left">
    					<div><img src="thumbs/' .  $row['pphoto'] . '" alt="Profile Photo" 
    					align="left" width="90%" border=1 />
    					<br /><center><input type="button" class="buttonchat" width="100%" name="ChangeProfile" id="ChangeProfle" value="Change Profile Photo" onclick="window.open(\'updateprofilephoto.php\')"; /></center></div></div>';
    					echo '<div class="right"><div id="div1">&nbsp;<div class="standard7"><label><b>Status: </b></label>';
    					echo '<span id="txtHintStatus">' . nl2br($row['statae']) . '</span><br /></div><br />';
    					echo '<input type="button" name="update" value="Update" onclick="show(1)" /><br /><br /><br /></div>';
    					echo '<div id="div2"><br /><br />
    					<form action="" method="post">
    					<label>Update Status: </label><br /><br />';
    					echo '<textarea rows="5" cols="30" name="statae" id="statae" onclick="this.value=\'\';" onfocus="this.select()" onblur="this.value=!this.value?\'Update status...\':this.value;" class="input">
    Update status ...
    					</textarea><br /><br />';
    					echo '<input type="button" value="Update" onclick="loadXMLDoc(\'getUpdateStatus.php\',\'txtHintStatus\',\'statae=\'+encodeURI(document.getElementById(\'statae\').value));show(2)"; /> &nbsp;
    					<input type="button" name="cancel" value="Cancel" onclick="show(2)" />
    					</form><br /></div>
    					<br /><br />';
    					echo '<label>Occupation: </label>' . $row['occupation'] . '<br /><br />';
    						if ($row['occupation']=="On the Road" OR $row['occupation']=="Sustained By Holiday"){
    
    						if ($row['companion']!="0"){
    							$carnation="{$SMyPId};{$companion1};Profile.php";
    							echo '<br /><br /><label>Travelling with: </label><input type="button" class="button10" value="' . $travel1 . '" onclick="document.location=\'AltSess.php?Pipi=' . urlencode($carnation) . '\'" />';
    						}
    and again it works all fine and good in a large screen but if you minimise it as the screen shrinks the name starts reading "Albert Ein"

    I did originally have the button size at 20em; same code as above, but then it read
    Albert Einst
    ein

    instead of breaking on the space.

    My foray into widths as percentages may have been a mistake and I am happy to go back to em, but again I had the problem that if the screen was minimised so that the div or td was below 20 em the button stuck out of its container.

    I am trying to check that my website still looks the same whether you are view it on a large computer screen, a netpad or a smart phone.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    There is an error in your css:
    Code:
    p.termlist {font-family:"Times New Roman";  font-size:90%; margin-left:50px; margin-right:50px << add semi-colon here text-align:left; margin-left:40px; margin-right:40px;}
    but it's probably not enough to account for your problem.

  • Users who have thanked AndrewGSW for this post:

    Jenny Dithe (04-17-2011)


  •  

    Posting Permissions

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