Question

更新2013-01-04

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

信息

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

问题/疑问

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

关于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>

如果jsfiddle不起作用的CSS

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

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

我的想法

我可以用巧妙的方式使用缩进，但似乎没有工作
我喜欢显示：内联。如果它可以保持这种方式很好，但也许那是不可能的？
它应该使用更少的减号字符和更长/更短的文本。
它不必与旧浏览器一起使用。
在jQuery / javascript之前我更喜欢CSS。

Answer 1

使用否定的`text-indent`！

text-indent缩进第一行。所以给它一个负值！

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

Answer 2

这样的事情应该这样做：

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

您将在第一行给出负缩进，因此左侧将放置X像素。通过给整个元素一个填充左边相同数量的px，这将把它全部放在正确的位置。

另见：http://jsfiddle.net/Rjvc9/3/

注意：display: inline不适用于此。 display:inline-block会。

Answer 3

使用CSS的content属性，您可以将减号字符插入页面并对其进行定位/设置，而无需将它们包含在HTML中或将其包装在任何标记中。

我修改了你的例子http://jsfiddle.net/cchana/Rjvc9/2/，它现在通过为单元格提供一些填充和位置属性来实现：

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

然后我使用----将content字符添加到单元格的开头，然后正确定位：

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

Answer 4

只要您的单元格不会被边界化，Flexbox就可以为您工作。

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

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

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

Answer 5

由于您使用的是table元素，请将“减号”（实际上是Ascii连字符，正式为HYPHEN-MINUS字符）放在自己的列中。您还应该使标记有效（td元素只能是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>

在CSS中，添加td { vertical-align: top; }。（或为每个<tr valign=top>元素添加相应的HTML标记tr。

默认情况下，列将左对齐，您可以根据需要对其进行调整。在现代浏览器中，您甚至不需要class属性，因为您可以使用选择器td:first-child和td:first-child + td。

Answer 6

对于内联显示器，您需要使用负边距和负文本缩进来混合。这是一个有效的jsfiddle，有一个例子：

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

JS Fiddle

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

6 个答案:

使用否定的`text-indent`！

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

6 个答案:

使用否定的text-indent！

使用否定的`text-indent`！