CSS - Indent all except first line

Question

Update 2013-01-04

• The flexbox solution makes very little extra HTML / CSS. However it's unclear if it can work in Firefox and IE10?
• To add minus characters to :before with CSS content instead of HTML is a better way to go.

Information

I have a table with some content. Depending on the depth I have a number of minus characters before the text.

Problem / question

I can't figure out how to make the text align right and the minus characters to align left, even when line break accur. The number of minus and the text length can vary.

Example on jsfiddle

Edit it if you like...

http://jsfiddle.net/Rjvc9/

HTML if jsfiddle don't work

<table>
    <td>            
        <span class="lines">----</span> <span class="text">My page that is far too long for it to fit on one row</span>
    </td>
</table>

<br>

This is how it should work.<br><br>

<table>
    <td>            
        <span class="lines">----</span> <span class="text">My page that is far<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;too long for it to fit<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on one row</span>
    </td>
</table>​

CSS if jsfiddle don't work

table {
    background: #eee;
    width: 150px;
}

td {
    font-family: Arial;
    font-size: 14px;
    line-height: 18px;
    margin: 40px;
}​

My thoughts

• I thougt i could use indent in a clever way but that don't seem to work.
• I like the display: inline. If it can be kept that way it would be nice, but maybe that's not possible?
• It should work on fewer minus characters and longer / shorter text.
• It don't have to work with old browsers.
• I prefer CSS before jQuery / javascript.

Answer 1

As long as your cells aren't going to be bordered, flexbox can work here for you.

td.dashed {
    display: -webkit-flex;
    display: flex;
}

Demo works with both a span or using content on a before psuedo element to contain the dashed. Does not work on anything older than IE10. Mozilla doesn't appear to like this, but it is supposed to support flexbox.

http://jsfiddle.net/Rjvc9/9/

Answer 2

Use a negative text-indent!

A text-indent indents the first line. So give it a negative value!

.first-line {text-indent: -5em; padding-left: 5em;}

Answer 3

Something like this should do it:

display: block;
padding-left: 37px;
text-indent: -37px;

You will give a negative indent on the first line so this will be placed X pixels to the left. By giving the whole element a padding-left of the same amount of px this will place it all on the right place again.

Also see: http://jsfiddle.net/Rjvc9/3/

Note: display: inline will not work on this. display:inline-block will.

Answer 4

Using CSS's content attribute, you can insert the minus characters into the page AND position/style them without the need to include them in your HTML or to wrap them in any tags.

I amended your example http://jsfiddle.net/cchana/Rjvc9/2/ and it now works by giving the cell some padding and a position attribute like so:

td {
    padding: 0 0 0 24px;
    position: relative;
}

I then added in the ---- characters to the beginning of the cell using content and then positioning it correctly:

td:before {
    content: '----';
    left: 0;
    position: absolute;
}

Answer 5

Since you are using a table element, put the “minus characters” (actually, Ascii hyphens, formally HYPHEN-MINUS characters) in a column of their own. You should also make the markup valid (a td element can only be a child of tr).

<table>
  <tr>
    <td class="lines">----</td>
    <td class="text">My page that is far too long for it to fit on one row</td>
</table>

In CSS, add td { vertical-align: top; }. (Or add the corresponding HTML markup, <tr valign=top>, for every tr element.

The columns will be left-aligned by default, and you can tune this as desired. On modern browsers, you won’t even need the class attributes, as you can use the selectors td:first-child and td:first-child + td for example.

Answer 6

For inline displays you kind of have to mix things up, using a negative margin and a negative text indent. Here is a working jsfiddle with an example:

#thisList ul li a {
    color:#333;
    text-indent:-1.5rem;
    margin-left:-2rem;
    line-height:1;
}

JS Fiddle