文本换行时如何设置制表符缩进

Question

CSS 文本缩进问题。我试图将输出可视化为 VS Code 代码编辑器窗口，并希望在代码空间宽度减小时将代码空间的文本换行。我的意思是代码文本的响应能力。

我试过这个：-

 <code>
            <span className='l'>
               <span className='method'>function </span><span className='function'>name</span>&#40;&#41; &#123;
            </span>
         </code>
         <code>
            <span className='l'>Lorem ipsum dolor a big cat jumped over a lazy dog.</span>
         </code>
         <code><span className='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;
}

我期望的是 VS Code 窗口中的这种输出

如图所示。

但是我像这样设置输出

Answer 1

我不太确定这是否是您想要的，但您可能需要使用

<pre>

标签（reference）。
只需包装代码块即可：

<pre><code>....</code></pre>

就像我在代码片段中所做的那样。

<strong>Without &lt;pre&gt;</strong>
<br>
<br>
<code>
function name() {
    Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor
    invidunt ut labore et dolore
    magna aliquyam erat,
    sed diam voluptua.
}
</code>
<br>
<br>
<br>
<strong>With &lt;pre&gt;</strong>
<pre>
<code>
function name() {
    Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor
    invidunt ut labore et dolore
    magna aliquyam erat,
    sed diam voluptua.
}
</code>
</pre>

如果这不符合您的需求，请看一下：https://stackoverflow.com/a/48694906/20896315

Answer 2

我想我有一个适合你的解决方案 - 请参阅下面的代码片段。这里主要是在元素及其伪

position: relative

元素上使用

position: absolute

和

::before

，并根据

padding

和

left

设置。

这仍然取决于能否单独解决 second

code

元素，我确实取消了

:nth-of-type

。但是，如果几个“代码组”直接彼此相连，那么您要么必须使用

div

或

span

将它们分成三个一组，要么需要对每个第二个

code

应用一个类元素：

.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 {
  color: #fff;
}

.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;
}

.code__space>code:nth-of-type(2) {
  position: relative;
  padding-left: 3em;
}

.code__space>code:nth-of-type(2)::before {
  position: absolute;
  left: 0em;
}

<div class="code__space">
  <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. Lorem ipsum dolor a big cat jumped over a lazy dog. Lorem ipsum dolor a big cat jumped over a lazy dog. Lorem ipsum dolor a big cat jumped over a lazy dog.</span>
  </code>
  <code>
    <span class='l'>&#125;</span>
  </code>
</div>