...

View Full Version : wrap text on space break not max length



Jenny Dithe
04-14-2011, 09:11 PM
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


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?

Excavator
04-14-2011, 09:48 PM
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.

Excavator
04-14-2011, 09:49 PM
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 (http://nopeople.com/CSS%20tips/h_ul_menu_no_images/index.html) with a set width button and more than one line of text.

Jenny Dithe
04-14-2011, 10:20 PM
My css is:


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


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.

Excavator
04-14-2011, 11:49 PM
If you just remove word-wrap:break-word; the default "normal" should break at a space like you would expect... I think.

Jenny Dithe
04-16-2011, 06:59 PM
I have my css like this:



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

Excavator
04-16-2011, 10:28 PM
I have my css like this:



.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 -
<!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>

Jenny Dithe
04-16-2011, 11:48 PM
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):


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:


<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}') ");

$row= mysql_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:


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

AndrewGSW
04-17-2011, 12:50 AM
There is an error in your css:

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum