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'm not quite sure if that's what you want but you may need to use the <pre> tag (reference).
Just wrap the code block: <pre><code>....</code></pre> Like I did in the snippet.

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

If that doesn't fit your needs, take a look at this: https://stackoverflow.com/a/48694906/20896315

Answer 2

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>