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/