how to set a tab indent if text is wrapped

Question

Text indetation css problem. I'm trying to visualise the output as VS Code code editor window and want the text of the code space be wrapped when code space width is decreased. What i mean is responsiveness of the code text.

I tried this:-

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

What I expect is this kind of output as in VS Code Window

as displayed in image.enter image description here

But I'm Setting output like thisenter image description here

Answer 1

I think I have a solution for you – see snippet below. The main thing here is the use of position: relative and position: absolute on the element and its pseudo ::before element, and according padding and left settings:

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

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

This still depends on being able to address the second code element seperately, which I did using :nth-of-type. But if several "code groups" follow directly upon each other, you'd either have to wrap them into groups of three using a divor span, or you need to apply a class to each of those second code elements:

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