CSS - 缩小除第一行以外的所有内容

Question

更新2013-01-04

• flexbox解决方案使得额外的HTML/CSS变得非常少.然而,目前还不清楚它是否可以在Firefox和IE10中运行？
• 要:before使用CSS内容而不是HTML 添加减号字符是一种更好的方法.

信息

我有一张包含一些内容的表格.根据深度,我在文本前面有一些减号.

问题/疑问

我无法弄清楚如何使文本右对齐和减号字符左对齐,即使在换行时也是如此.减号和文本长度可以变化.

关于jsfiddle的例子

如果你愿意,可以编辑它......

http://jsfiddle.net/Rjvc9/

如果jsfiddle不起作用的HTML

<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如果jsfiddle不起作用

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

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

我的想法

• 我可以用聪明的方式使用缩进,但这似乎不起作用.
• 我喜欢显示:内联.如果它可以保持这种方式它会很好,但也许这是不可能的？
• 它应该适用于较少的减号字符和较长/较短的文本.
• 它不必与旧浏览器一起使用.
• 在jQuery/javascript之前我更喜欢CSS.

Answer 1

使用否定text-indent!

A text-indent缩进第一行.所以给它一个负值!

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

Answer 2

只要你的单元格不会有边框，Flexbox 就可以在这里为你工作。

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

演示适用于跨度或使用之前的伪元素上的内容来包含虚线。不适用于 IE10 之前的任何版本。Mozilla 似乎不喜欢这个，但它应该支持 Flexbox。

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