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>() {
</span>
</code>
<code>
<span className='l'>Lorem ipsum dolor a big cat jumped over a lazy dog.</span>
</code>
<code><span className='l'>}</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
2
Answers
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.If that doesn’t fit your needs, take a look at this: https://stackoverflow.com/a/48694906/20896315
I think I have a solution for you – see snippet below. The main thing here is the use of
position: relative
andposition: absolute
on the element and its pseudo::before
element, and accordingpadding
andleft
settings.It still depends on being able to address the second
code
element seperately, which I did unsing: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 adiv
orspan
, or you need to apply a class to each of those secondcode
elements: