5

2013-01-04 更新

  • flexbox 解决方案几乎不需要额外的 HTML / CSS。但是目前还不清楚它是否可以在 Firefox 和 IE10 中运行？
  • 在 CSS 内容中添加减号:before而不是 HTML 是一种更好的方法。

信息

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

问题/问题

我不知道如何使文本右对齐和减号左对齐，即使换行符准确。减号的数量和文本长度可能会有所不同。

jsfiddle 上的示例

喜欢就编辑吧...

http://jsfiddle.net/Rjvc9/

HTML 如果 jsfiddle 不起作用

<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。
4

6 回答 6

20

使用负数text-indent！

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

.first-line {text-indent: -5em; padding-left: 5em;}
于 2013-01-04T14:20:12.757 回答
4

这样的事情应该这样做：

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

您将在第一行给出一个负缩进，因​​此它将被放置在左侧 X 像素。通过给整个元素一个相同数量的 px 的 padding-left，这将再次将它全部放置在正确的位置。

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

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

于 2013-01-04T13:26:29.397 回答
0

使用 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;
}
于 2013-01-04T13:28:41.147 回答
0

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

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

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

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

于 2013-01-04T14:17:25.863 回答
0

由于您使用的是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>（或者为每个tr元素添加相应的 HTML 标记 , 。

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

于 2013-01-04T18:13:02.477 回答
0

对于内联显示，您必须混合使用负边距和负文本缩进。这是一个带有示例的工作 jsfiddle：

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

JS小提琴

于 2015-04-20T21:20:55.840 回答