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

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;}