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 3 of 3
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    truncating hyperlink text possible?

    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:
    PHP Code:
    <class="section-headers-page">Latest news</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>
    <
    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>
    <
    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>
    <
    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>
    <
    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>
    <
    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Partizan,
    overflow:hidden; is as good a CSS is going to get you. Like this maybe:
    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 {
    	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.
    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:

    Partizan (02-27-2009)

  • #3
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

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