英文:
How to remove spaces between span elements within code element?
问题
我想展示JSX代码示例。我使用以下代码：
在HTML中，我使用div>pre>code>span标签来格式化每个单独的元素，以显示语法。
<div class="highlight">
<pre>
<code class="code">
<span>const </span>
root
<span>=</span>
ReactDOM
<span>.</span>
<span>createRoot</span>
<span>(</span>
document
<span>.</span>
<span>getElementById</span>
<span>(</span>
<span>'root'</span>
<span>)</span>
<span>)</span>
<span>;</span>
root
<span>.</span>
<span>render</span>
<span>(</span>
<span>
<span>
<span><</span>
h1
</span>
<span>></span>
</span>
<span>Hello, World!</span>
<span>
<span>
<span></</span>
h1
</span>
<span>></span>
</span>
<span>)</span>
<span>;</span>
</code>
</pre>
</div>
在CSS中，我使用了white-space和word-break属性。
.highlight {
background: #eeffcc;
border: 1px solid #e1e4e5;
margin: 0;
padding: 0;
overflow: auto;
tab-size: 1.5em;
}
pre {
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
margin: 0;
padding: 12px;
display: block;
overflow: auto;
word-break: break-all;
}
一开始，在code元素中的代码之前有一个大的空白。后来，我尝试了不同的CSS代码，你可以在下面的截图中看到我最好的尝试。
我尝试将white-space: pre应用于span元素。但它的表现不如我所期望的那样。
英文:
I want to show JSX code example. I use following code:
In HTML I use div>pre>code>span tags for formatting each individual element, for showing syntax.
<div class="highlight">
<pre>
<code class="code">
<span>const </span>
root
<span>=</span>
ReactDOM
<span>.</span>
<span>createRoot</span>
<span>(</span>
document
<span>.</span>
<span>getElementById</span>
<span>(</span>
<span>'root'</span>
<span>)</span>
<span>)</span>
<span>;</span>
root
<span>.</span>
<span>render</span>
<span>(</span>
<span>
<span>
<span><</span>
h1
</span>
<span>></span>
</span>
<span>Hello, World!</span>
<span>
<span>
<span></</span>
h1
</span>
<span>></span>
</span>
<span>)</span>
<span>;</span>
</code>
</pre>
</div>
In CSS I use: white-space and word-break properties.
.highlight {
background: #eeffcc;
border: 1px solid #e1e4e5;
margin: 0;
padding: 0;
overflow: auto;
tab-size: 1.5em;
}
pre {
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
margin: 0;
padding: 12px;
display: block;
overflow: auto;
word-break: break-all;
}
In the beginning I had just one, big white-space before code in code element. After I tried different CSS code you can my best on a screenshot below.
I tried to apply: white-space:pre to a span element. But it didn't act like I wanted.
答案1
得分: 1
要删除span元素之间的空格，您必须将所有标记写在单行上，而不要在它们之间留有空格。因为您是在pre标记中编写代码。
英文:
To remove spaces between span elements you have to write all tags in a single line without having spacing between them. because you are writing code in pre tag.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论