...

View Full Version : CSS :: Second Line Indent For Links



Yasha
12-27-2005, 07:34 PM
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?

Yasha
12-27-2005, 08:17 PM
I think I figured it out: first-line pseudo element (http://www.jessett.com/web_sites/css/first_letter.shtml).

No... it treats the link as just one line. :(

rmedek
12-27-2005, 08:32 PM
Sure, or just use text-indent (copy and paste for an example):


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

harbingerOTV
12-28-2005, 02:56 AM
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.

rmedek
12-28-2005, 03:17 AM
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. :)

marcus27
04-22-2008, 08:58 PM
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.

<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

rmedek
04-22-2008, 09:37 PM
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?

marcus27
04-25-2008, 06:10 PM
Maybe it's just a simpler way of doing the same thing.

rmedek
04-25-2008, 06:46 PM
I guess I'm just not seeing it. The first method uses


li {
padding-left: 1em;
text-indent: -1em;
}

…and the second uses


div {
padding-left: 20px;
text-indent: -20px;
}

…so the only thing that's different is what element it's being applied to. :confused:

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

mikeozz2007
11-19-2009, 04:20 PM
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?

Zangeel
11-19-2009, 04:28 PM
This thread makes me oddly happy :D

PuppyBreath
09-01-2010, 08:58 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum