...

View Full Version : truncating hyperlink text possible?



Partizan
02-27-2009, 03:16 PM
Hi,

Just wondering if it is possible to truncate specific hyperlinks (in CSS if possible?) so they fit is a fairly narrow div column I have on my site's right hand side.

I would like to be able to allow X number of charachters for each of the following hyperlinks. It would also be nice to include a few dots like ... at the end.

So for example, the story entitled "Van Basten let go by LFC as Legoland United go top" would appear as "Van Basten let go by LFC as..."

Any way anyone know? Thanks;)


These are my current links:

<p class="section-headers-page">Latest news</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-21-story01.shtml" class="link-news">Van Basten let go by LFC as Legoland United go top</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-18-story01.shtml" class="link-news">Van Basten on last legs as LFC dumped out of cup by "losers"</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-14-story01.shtml" class="link-news">Gap tightens at top as leaders held by Torino </a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-07-story01.shtml" class="link-news">LFC comeback ends Napoli's record unbeaten run</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-01-24-story01.shtml" class="link-news">LFC fire Ferguson as Legoland United claim third Derby victory of the season</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-01-08-story01.shtml" class="link-news">Parma connects to the World</a>
</p>

Excavator
02-27-2009, 04:28 PM
Hello Partizan,
overflow:hidden; is as good a CSS is going to get you. Like this maybe:
<!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 {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
.no-space-above {
width: 150px;
float: right;
clear: right;
background: #ccc;
border-top:1px solid #000;
overflow: hidden;
}
.no-space-above a {
text-decoration: none;
white-space: nowrap;

}
</style>
</head>
<body>
<div id="wrap">
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-21-story01.shtml" class="link-news">
Van Basten let go by LFC as Legoland United go top
</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-18-story01.shtml" class="link-news">
Van Basten on last legs as LFC dumped out of cup by &quot;losers&quot;
</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-14-story01.shtml" class="link-news">
Gap tightens at top as leaders held by Torino
</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-02-07-story01.shtml" class="link-news">
LFC comeback ends Napolis record unbeaten run
</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-01-24-story01.shtml" class="link-news">
LFC fire Ferguson as Legoland United claim third Derby victory of the season
</a>
</p>
<p class="no-space-above">
<a href="http://www.minifigtimes.com/news/2009/2009-01-08-story01.shtml" class="link-news">
Parma connects to the World
</a>
</p>
<!--end wrap--></div>
</body>
</html>

To truncate the text of the link you will have to change the bits in red yourself.

Partizan
02-27-2009, 04:40 PM
Thanks Excavator!
That's very useful and I will save this for possible use in future. I don't really like the way some characters half appear so I think I will manually reduce the size of the link text as needed, it is a little extra work but not too bad!

However it is very good to know the CSS limits. Cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum