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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS :: Second Line Indent For Links

    New here. Have a question about long links that spill over into a second line. Assuming that the width of the sidebar (or other layout div) is 'fixed' for design reasons, is there a way using CSS to indent the display of the second line of the link? For example, say our link looks like this without what I am looking for:

    Foundation for Individual Rights
    in Education


    Is there a way using CSS to make it look like this:

    Foundation for Individual Rights
    ___in Education


    (Replace blank space where the underline is. I wasn't sure how to format it correctly here.)

    If not, is there a way to do that using Javascript or something else?

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I figured it out: first-line pseudo element.

    No... it treats the link as just one line.
    Last edited by Yasha; 12-27-2005 at 08:32 PM.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Sure, or just use text-indent (copy and paste for an example):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>indented links</title>
    	<style type="text/css">
    		*	{
    			margin: 0;
    			padding: 0;
    		}
    
    		body	{
    			font: 69%/1.5em verdana, arial, sans-serif;
    			color: #333;
    		}
    
    		#wrapper	{
    			width: 42em;
    			margin: 5em auto 0 auto;
    			padding: 1em;
    			border: solid #ccc 1px;
    			border-left: solid 17em #ccc;
    		}
    
    		#sidebar	{
    			margin-left: -16.5em;
    			width: 15em;
    			float: left;
    		}
    
    		#wrapper:after	{
    			content: ".";
    			display: block;
    			clear: both;
    			visibility: hidden;
    			height: 0;
    		}
    
    		h1	{
    			margin: 1em 0;
    			font-size: 1.2em;
    		}
    
    		li	{
    			list-style: none;
    			margin: 1em 0;
    		}
    
    		a	{
    			color: #fff;
    			text-decoration: none;
    		}
    
    		a:hover	{
    			text-decoration: underline;
    		}
    
    		li	{ 	/* the rules that do the indenting */
    			padding-left: 1em;
    			text-indent: -1em;
    		}
    	</style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="sidebar">
    		<ul>
    			<li><a href="#">link one, which will be very long</a></li>
    			<li><a href="#">link two, which will also be very long</a></li>
    			<li><a href="#">link three, which is so, so very long. It's so dang long, in fact, that it might even wrap a few times.</a></li>
    		</ul>
    	</div>
    	<h1>Indenting</h1>
    	<p>The links on the left have padding applied to the left, then a negative text-indent brings the first line back to where it belongs.</p>
    </div>
    </body>
    </html>
    Last edited by rmedek; 12-28-2005 at 03:23 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Wow Richard, I think I've tried to do what he was asking before and just gave up. I guess the simple logical approach was just too simple and uh logical for me at the time. Nice.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    lol… thanks. Little things like this are my favorite part of CSS design… trying to find the elegant answer to a design issue.

    Just wait, someone will come up with a way to do this that only uses ONE line of code.

  • #6
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    Just wait, someone will come up with a way to do this that only uses ONE line of code.
    Sorry for reviving a topic that's almost three years old now, but I think I have a more convenient way to address this problem. I was looking for a solution to the same problem and then found this topic. rmedek's last post inspired me to play around with it .
    Basically, I took a <div> and padded the left side by 20px. Then I indented the first like, using "text-indent", to a value of -20px. So the whole div block is pushed to the right, while the first line is pushed back to the left, to the original, unpadded position.
    It works fine in Firefox.
    Code:
    <div style="padding-left: 20px; text-indent: -20px;">First line text blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.<br>
    Another line<br>
    Another line<br>
    etc..etc</div>
    Values can obviously be changed to suite one's needs, just make sure the indentation is the negative value of the padding .

    Hope that helps,
    Marcus

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Cool…er, but it's the same solution. Padding on the left, negative text-indent to "outdent" the first line of text. Or am I missing something?

  • #8
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Maybe it's just a simpler way of doing the same thing.

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I guess I'm just not seeing it. The first method uses

    Code:
    li {
     padding-left: 1em;
     text-indent: -1em;
    }
    …and the second uses

    Code:
    div {
     padding-left: 20px;
     text-indent: -20px;
    }
    …so the only thing that's different is what element it's being applied to.

    Either way, I'm glad you've got something that working for you.

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi - I found this thread and was a great solution to my problem however using this solution creates another problem for me by where the image used as the list bullet now dissapears. Any ideas on how to correct this?

  • #11
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts
    This thread makes me oddly happy
    PHP Code:
    $aString is_string((string)array()) ? true false// true :D 
    [/CENTER]

  • #12
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If the links aren't in list items or divs you can just do a style rule like this:

    a{
    display:block;
    text-indent:-1em;
    padding-left:1em;
    /* Gap between items */
    margin-bottom:0.5em;
    }


    Then just put in the links like this:

    <a href="#">This is a long line of text with a line break.</a>
    <a href="#">This is a test with a line break. In fact this one is longer than most.</a>
    <a href="#">This is a test with a line break.</a>


    Of course, replace # with the actual target of the link.


  •  

    Posting Permissions

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