Update 2013-01-04
: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...
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> too long for it to fit<br>
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
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.