(edited several times for clarity)

Note: I am not the one writing the HTML.

Here is the format of the HTML (note: the links and text after the links are on the same line):

<li>
    <strong>Title of section</strong>
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>link here</a> Some text here...
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>another link</a> More Text ... 
</li>

What I am trying to do is add a hanging indent to the each line that begins with the link and continues with text so that if the text continues to the next line, the subsequent lines will be indented.

Example of hanging indent (thank you @Mohsen)

Illustration of problem (the line beginning with yellow text starts too far to the left, it should be indented so that it lines up with "link" on the line above it"):

Is there a way to do this with pure CSS? If not, with javascript or jQuery?

(edited several times for clarity)

Note: I am not the one writing the HTML.

Here is the format of the HTML (note: the links and text after the links are on the same line):

<li>
    <strong>Title of section</strong>
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>link here</a> Some text here...
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>another link</a> More Text ... 
</li>

What I am trying to do is add a hanging indent to the each line that begins with the link and continues with text so that if the text continues to the next line, the subsequent lines will be indented.

Example of hanging indent (thank you @Mohsen)

Illustration of problem (the line beginning with yellow text starts too far to the left, it should be indented so that it lines up with "link" on the line above it"):

Is there a way to do this with pure CSS? If not, with javascript or jQuery?

• javascript
• jquery
• html
• css
• text-indent

Share Improve this question Follow edited Sep 17, 2013 at 15:00 dmr asked Sep 17, 2013 at 14:40 dmrdmr 22.4k3737 gold badges104104 silver badges139139 bronze badges 4

• 7 hanging indent meaning ? – Tushar Gupta - curioustushar Commented Sep 17, 2013 at 14:41
• 3 'I am not the one writing the HTML' Great... – Albzi Commented Sep 17, 2013 at 14:42
• 4 hanging indent – Mohsen Safari Commented Sep 17, 2013 at 14:44
• 1 Is this what you are after?? – user447356 Commented Sep 17, 2013 at 14:45

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

This can be achieved using text-indent and padding-left/margin-left.

li{
    text-indent: -25px;
    padding-left: 25px;
}

Working Fiddle

There is also a value hanging for "text-indent" property (experimental). check MDN.

Use CSS:

li{
    list-style:none;
    padding-left:10px;
}
li strong{
    display:block;
    margin-left:-10px
}

jsFiddle Example

Wrap the text in a <span> and then style that with left margin/padding.

EDIT: Add a margin-right to the anchors if you can't edit the HTML

I take it the link and the text are supposed to be on the same line. If so, try using CSS

li a{ display: inline-block; margin-right: 2em; }

Do not use non-breaking whitespaces for indentation. They would only indent the first line, as you are experiencing. Instead, use the proper HTML:

<li>
    <strong>Title of section</strong>
    <p><a>link here</a> Some text here that might go into a second line</p>
    <p><a>another link</a> More Text that is indented even in subsequent lines when text goes onto second or more lines</p>
</li>

Now you can indent the paragraphs with margin-left or padding-left, and if you want to indent the first line differently (in either direction) you can use text-indent.

I don't think there's a script free solution to your problem, as the white spaces seem to make it impossible. How about this: Indent everything in the <li>-element, bring back the title and remove all whitespaces.

CSS

li {
    padding-left: 10px;
}

li > strong {
    display:block;
    margin: 0 0 0 -10px;
}

JavaScript

$('ul > li').each(function() {
    $(this).html($(this).html().replace(/ /gi, ''));
});

The replacement function is adapted from genesis' answer to "Remove ' ' - still trying".

Demo

Try before buy