如何用CSS实现代码换行时的制表符缩进（仿VS Code效果）

我遇到了CSS文本缩进问题，希望实现类似VS Code编辑器的代码显示效果——当代码区域宽度缩小时，代码文本自动换行，实现响应式布局。我尝试了以下HTML结构和CSS代码，但输出效果不符合预期，想要达到VS Code中的缩进换行效果。

我的HTML结构 #

<code>
    <span class='l'>
       <span class='method'>function </span><span class='function'>name</span>&#40;&#41; &#123;
    </span>
 </code>
 <code>
    <span class='l'>Lorem ipsum dolor a big cat jumped over a lazy dog.</span>
 </code>
 <code><span class='l'>&#125;</span></code>

我的CSS代码 #

.code__space{
   display: flex;
   flex-direction: column;
   text-align: left;
   margin: 0px 10px 0px;
   padding: 0px 0px 0px 15px;
   background-color: #222;
   border-left: 1px solid #777;
}
code{
   display: inline-block;
   color: #fff;
}
.l{
   padding-left: 10px;
}
.code__space::before {
   counter-reset: listing;
}
.code__space code {
   counter-increment: listing;
}
.code__space code::before{
   content: counter(listing);
}

.code__title{
   color: #777;
}
.method{
   color: #4f3eff;
}
.function{
   color: yellow;
}

原代码的核心问题在于行号实现方式和换行缩进控制缺失，以下是针对性修改方案：

修改后的CSS代码 #

.code__space {
  display: flex;
  flex-direction: column;
  background-color: #222;
  padding: 10px;
  margin: 0 10px;
  border-left: 1px solid #777;
  font-family: monospace; /* 使用等宽字体，匹配代码编辑器视觉 */
}

code {
  display: list-item; /* 利用list-item原生实现行号，替代手动counter */
  list-style-type: decimal; /* 十进制行号 */
  list-style-position: inside; /* 行号嵌入内容流，保证对齐 */
  color: #fff;
  padding-left: 15px; /* 行号与代码内容的间距 */
  text-indent: -25px; /* 关键：抵消行号默认缩进，让换行文本对齐第一行内容起始位置 */
  white-space: pre-wrap; /* 保留代码空格，同时允许自动换行 */
  word-wrap: break-word; /* 长单词自动换行，避免溢出 */
  line-height: 1.5; /* 优化行高，提升可读性 */
}

.l {
  padding-left: 25px; /* 给需要缩进的代码行增加额外缩进，模拟编辑器层级缩进 */
}

/* 保留原有的语法高亮样式 */
.code__title {
  color: #777;
}
.method {
  color: #4f3eff;
}
.function {
  color: yellow;
}

关键修改说明 #

• 行号实现优化：用display: list-item替代手动计数器，原生行号能自动跟随每行内容，避免自定义counter的对齐问题
• 换行缩进控制：text-indent: -25px配合padding-left，让换行后的文本自动对齐到第一行代码的起始位置，完全模拟VS Code的换行效果
• 响应式换行：white-space: pre-wrap保留代码中的空格格式，同时允许内容随容器宽度自动换行，满足响应式需求
• 视觉优化：添加等宽字体和合适行高，让代码显示更接近专业编辑器的视觉效果

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