PDA

View Full Version : Text inside a css div inside an <a></a> breaking onto multiple lines



renzska
Mar 15th, 2007, 11:01 PM
I am having an issue with text inside a div, inside of an <a></a> breaking onto multiple lines depending on the characters and/or spaces in the text.

This is probably a simple fix and is probably related to the css. A sample is posted below. I would like all of the text (i trim it to fit the width of the image) to be on one line.



<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">

body { background-color: #f1f2f5; }

#button
{
float: left;
width: 103px;
margin: 0 0 0 0px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
font-size:12px;
text-align: center

background-color: #fff;
padding: 0px 0px 0px 5px;
color: #000;
text-decoration: none;


}

#button a, a:link, a:visited, a:active
{
display: block;
text-decoration: none;
color: #000;
margin: 0;
padding: 10px;
border: none;
position: relative;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;



}

#button a:hover
{
background-color: #ecf4f9;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
/*border-right-style: dotted;*/


}

#button img
{
border-width: 0;
padding: 3px 3px 3px 0.5em;
border-right: 2px solid #666565;
border-bottom: 2px solid #666565;
background-color: #2175bc;
color: #fff;

}

</style>


</head>
<body style="zoom: 100%"><div id="button">
<a href="test.php">
How å
</a>
</div>
</body>
</html>



Any help would be greatly appreciated.

Thank you,

John

renzska
Mar 15th, 2007, 11:18 PM
I found the problem being the width: 103px;

My images are about 280 pixels, and the div was autosizing to fit that image, but the text was still listening to the 103px setting causing it to break onto multiple lines if it was longer than 103px.

This leads to another question, is there a way, either with css or javascript, to auto ellipsis text based on a certain width that you want to show?

My problem lies in that I'm trying to give text above the image, but the text may be too long (it's auto generated) so I want to trim it and add a "..." to the end to fit.

Thanks,

John

renzska
Mar 15th, 2007, 11:45 PM
And I found out how to do this using the following:

overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;

However, I am having a new problem. When I mousover the link (image or text, the right border does not show up. Is there anyway to get the right border on hover to show up correctly?

The new sample code is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- saved from url=(0022)http://www.google.com/ --><html>
<head>
<meta HTTP-EQUIV="Page-Exit" CONTENT="blendTrans(Duration=.5)" http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">

body { background-color: #f1f2f5; }

#button
{
float: left;
width: 292px;
margin: 0 0 0 0px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
font-size:12px;
text-align: center
background-color: #fff;
color: #000;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}

#button a, a:link, a:visited, a:active
{
display: block;
text-decoration: none;
color: #000;
margin: 0;
padding: 10px;
border: none;
position: relative;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
}

#button a:hover
{
background-color: #ecf4f9;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}

#button img
{
border-width: 0;
padding: 3pxdd 3px 3px 0.5em;
border-right: 2px solid #666565;
border-bottom: 2px solid #666565;
background-color: #2175bc;
color: #fff;
}

</style>


</head>
<body>

<div id="button">
<a href="test.php">
How å, | - sdfgwopaldorkdm fdjsklafdfdasfdasdf<br>
<img src="u22.png" border ="0">
</a>
</div>

<div id="button">
<a href="test.php">
How å, | - sdfgwopaldorkdm fdjsklafdfdasfdasdf<br>
<img src="u22.png" border ="0">
</a>
</div>

</body>
</html>


Thanks,

John