CSS - 放置溢出：自动内溢出：隐藏答案

【问题标题】：CSS - placing overflow:auto inside overflow:hiddenCSS - 放置溢出：自动内溢出：隐藏
【发布时间】：2013-05-04 21:58:37
【问题描述】：

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

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

如果你想看一个活生生的例子，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>）保留。

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

【问题讨论】：

尝试在第二个上应用溢出：自动
这个有用吗？ stackoverflow.com/questions/1312236/…
@MaheshPatidar <td> 元素不支持 overflow 属性。（见stackoverflow.com/questions/9152042/…）
看看我的回答

【解决方案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;
}

【讨论】：

如果td.lines 比20px 长怎么办？假设我有一个包含 10000 行代码的源文件，行号 9234 肯定会比 20px 长。
同意，那么您可能可以根据行宽通过javascript设置此填充，例如像这样使用 jquery： $('td.code').css('padding-left', $('td.lines').width()+"px");
哦，我怎么不喜欢使用 JavaScript 进行样式设置...如果有人禁用了它呢？有什么办法吗？
现在相当多的网站都依赖于 javascript，所以我认为当有人禁用它时，这种情况非常罕见。您也可以将行作为独立的 html 元素放在表格之外（而不是 td），无论如何您已经将行号从代码中分离出来，但这需要更改您的 html 标记。我相信确实有很多其他方法可以做到这一点
哦，听起来很糟糕，我想我会继续使用 JS。新的问题是，Gists 文件嵌入了 <script> 写入 DOM 元素的标签。因此，执行 jQuery 时这些表不存在。