code标签代码超视图时如何为容器加滚动条？overflow:scroll效果不符

问题 #

展示代码语法时，单行代码长度超出视图范围，尝试用CSS的overflow: scroll给对应容器添加滚动条，但未达到预期效果——当前设置会导致浏览器整体出现横向滚动条。

相关代码 #

HTML

<table class="syntax-content-wrap">
    <tr>
        <td class="line-nr-wrap"><span class="nr">6</span></td>
        <td class="syntax-line-wrap"><pre><code>    public DefaultRoute(string controller, string action) : base(Feature.DefaultRoute)</code></pre></td>
    </tr>
</table>   

Sass/CSS

table.syntax-content-wrap {
    line-height: 1;
    margin-left: 7px;
    margin-top: 11px;

    & td.line-nr-wrap {
        vertical-align: middle;
        width: 44px;

        & > span.nr {
            font-size: 11px;
            font-weight: bold;
        }
    }

    & td.syntax-line-wrap {
        overflow: scroll;
        
        & > pre {
            display: block;
            margin: 0px;

            & > code {
            }
        }
    }
}

解决方案 #

问题根源是表格默认会根据内容自动撑开宽度，不会限制自身尺寸，导致超长代码拉宽整个页面。按以下步骤修改：

• 给表格添加宽度约束与固定布局
  给外层表格设置width: 100%和table-layout: fixed，强制表格宽度继承父容器，同时固定列宽布局，避免被内容撑爆：

  table.syntax-content-wrap {
      line-height: 1;
      margin-left: 7px;
      margin-top: 11px;
      width: 100%; /* 让表格占满父容器宽度 */
      table-layout: fixed; /* 固定列宽布局 */
      overflow: hidden; /* 防止表格自身溢出父容器 */
  }
  

• 调整代码单元格的溢出规则
  修改代码所在单元格的样式，让它占据剩余宽度，仅在需要时显示横向滚动条：

  & td.syntax-line-wrap {
      width: calc(100% - 44px); /* 减去行号列的固定宽度 */
      overflow-x: auto; /* 替换原overflow:scroll，仅在需要时显示滚动条 */
      
      & > pre {
          display: block;
          margin: 0;
          white-space: pre; /* 保留代码的换行与空格格式 */
          overflow-x: visible; /* 让pre不截断代码，交给td处理滚动 */
      }
  }
  

• 确保行号列宽度稳定
  已设置的line-nr-wrap列width: 44px，配合table-layout: fixed可保证行号列宽度固定，不受内容影响。

修改后，超长代码只会在代码单元格内出现横向滚动条，不会导致浏览器整体出现横向滚动。

内容的提问来源于stack exchange，提问作者SteinTech