如何为 <pre> 减少行 space

Question

可重现代码

你好，我在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>

不良影响

并生成如下效果

但是太宽的线space使得效果有点难看。你知道如何减少 space 行吗？

试过方法

我试过这个方法

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

但是它只适用于一行，如果我想应用到其他行，比如这个

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

会覆盖部分行内容

问题

如何减少行space？谢谢

Answer 1

您可以对 CSS 中的 pre 使用 margin: 0（或任何其他值）：

pre {
  margin: 0;
}

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

Answer 2

您可以在 pre 元素上使用 css display 和 line-height 属性并调整您想要的行高。

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>

或重置默认边距。

如何为 <pre> 减少行 space

how to reduce line space for <pre>

html

css

pre

可重现代码

不良影响

试过方法

问题