Search code examples
htmlcsspre

how to reduce line space for <pre>

reproducible code

Hello, I used the following code in markdown

<pre><span style="color:blue">Text            = ' Sooo SAD I will miss you here in San Diego!!!'</span>,   <span style="color:blue">Selected Text='Sooo SAD'</span>,   <span style="color:blue">Sentiment = 'negative'</span></pre> 
<pre>tokens          =</pre>
<pre>input_ids       = [0, 2430, 98, 3036, 5074, 939, 40, 2649, 47, 259, 11, 15610, 1597, 2977, 16506, 2, 1, 1...1]</pre>
<pre>attention_masks = [1, 1,    1,  1,    1,    1,   1,  1,    1,  1,   1,  1,     1,    1,    1,     1, 0, 0...0]</pre>
<pre>start_tokens    = [0, 0,    1,  0,    1,    0,   0,  0,    0,  0,   0,  0,     0,    0,    0,     0, 0, 0...0]</pre>
<pre>end_tokens      = [0, 0,    0,  0,    1,    0,   0,  0,    0,  0,   0,  0,     0,    0,    0,     0, 0, 0...0]</pre>
<pre>Edit Text       = ' Sooo SAD I will miss you here in San Diego!!!' (len=46), Edit Seletected Text='Sooo SAD' (len=8)</pre>
<pre>char            = [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0...0] (len=46, num_1=9)</pre>
<pre>offset          = [(0, 3), (3, 5), (5, 9), (9, 11), (11, 16), (16, 21), (21, 25), (25, 30), (30, 33), (33, 37), (37, 41), (41, 43), (43, 46)]</pre>

undesired effect

and generate the following effect enter image description here

But the too wide line space makes the effect is kind of ugly. Do you know how to redue the line space?

Tried method

I tried this method

<pre style='display:inline'>tokens          =</pre> <br>
<pre>input_ids       = [0, 2430, 98, 3036, 5074, 939, 40, 2649, 47, 259, 11, 15610, 1597, 2977, 16506, 2, 1, 1...1]</pre>

But it only works for one line, if I want to apply to other lines such as this

<pre style='display:inline'>tokens          =</pre> <br>
<pre style='display:inline'>input_ids       = [0, 2430, 98, 3036, 5074, 939, 40, 2649, 47, 259, 11, 15610, 1597, 2977, 16506, 2, 1, 1...1]</pre> <br>
<pre>attention_masks = [1, 1,    1,  1,    1,    1,   1,  1,    1,  1,   1,  1,     1,    1,    1,     1, 0, 0...0]</pre>

it would cover part of line content enter image description here

Question

How to reduce the line space? Thank you

Solution

  • You could use css display and line-height properties on the pre elements and adjust the line-height you want.

    pre {
   display: inline;
   line-height: 0.8em;
}
    <pre><span style="color:blue">Text            = ' Sooo SAD I will miss you here in San Diego!!!'</span>,   <span style="color:blue">Selected Text='Sooo SAD'</span>,   <span style="color:blue">Sentiment = 'negative'</span></pre> 
<pre>tokens          =</pre>
<pre>input_ids       = [0, 2430, 98, 3036, 5074, 939, 40, 2649, 47, 259, 11, 15610, 1597, 2977, 16506, 2, 1, 1...1]</pre>
<pre>attention_masks = [1, 1,    1,  1,    1,    1,   1,  1,    1,  1,   1,  1,     1,    1,    1,     1, 0, 0...0]</pre>
<pre>start_tokens    = [0, 0,    1,  0,    1,    0,   0,  0,    0,  0,   0,  0,     0,    0,    0,     0, 0, 0...0]</pre>
<pre>end_tokens      = [0, 0,    0,  0,    1,    0,   0,  0,    0,  0,   0,  0,     0,    0,    0,     0, 0, 0...0]</pre>
<pre>Edit Text       = ' Sooo SAD I will miss you here in San Diego!!!' (len=46), Edit Seletected Text='Sooo SAD' (len=8)</pre>
<pre>char            = [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0...0] (len=46, num_1=9)</pre>
<pre>offset          = [(0, 3), (3, 5), (5, 9), (9, 11), (11, 16), (16, 21), (21, 25), (25, 30), (30, 33), (33, 37), (37, 41), (41, 43), (43, 46)]</pre>

    Or reset the default margin.