Question

我正在创建一个网站，我需要为<pre>标签提供语法高亮和行号支持（我正在使用GitHub Gists，但这没关系）。

问题是，我的网站是响应式的，我无法在width中为<pre>分配静态<td>属性，因为该表可以调整大小。

如果您想查看实时示例here's the example I created to show you what I'm talking about: http://jsfiddle.net/akashivskyy/jNRrn/.

如果你不想搬到任何地方，这里有一个简短的解释......

我的基本树看起来像这样：

<div class="file">
    <table class="source">
        <tr>
            <td class="lines">
                <span class="line-number">1</span>
                <span class="line-number">2</span>
                <span class="line-number">3</span>
            </td>
            <td class="code">
<pre>NSString *title = @"Title";
NSString *title2 = [title stringByAppendingString:@"This is a very very long string"];
NSLog(@"%@", title2);</pre>
            </td>
        </tr>
    </table>
</div>

非常基本CSS：

.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

这不起作用，因为<pre>没有width属性。我设法以某种方式允许滚动的唯一方法是将overflow: auto应用于我的.file类：

.file {
    overflow: auto;
    width:340px;
}

td.code pre {
    overflow: auto;
}

但这并不能让我满意，因为整个表格正在滚动，我想要保留行号（第一个<td>）。

现在你明白了。我的问题是：有没有办法实现我的结果，而没有通过一些棘手的width相似的脚本为我的<pre>元素分配静态responsive.js属性？ < / p>

Answer 1

如果你想要保留行号...如何让它们绝对定位？并为代码添加适当的填充。

/* your previous solution */
.file {
    overflow: auto;
    width:340px;
}
td.code pre {
    overflow: auto;
}
/* + add this */
td.lines {
    position:absolute;
}
td.code{
    padding-left:20px;
}

CSS - 置顶溢出：auto inside overflow：hidden

1 个答案: