所以我有这个基本的哈巴狗代码
p This is some text
span foo
span bar
Run Code Online (Sandbox Code Playgroud)
预期的输出看起来像这样:
这是一些文字foo吧
然而,它实际输出此(删除空格):
这是一些textfoobar
可以通过在行的末尾添加空白空格来添加空格.
我需要能够在我的编辑器中打开白色空间修剪时保留空白区域.保存文件时,空格修剪会从行尾删除空白区域.
那么有没有办法强制在行的末尾添加空格,即使在编辑器中打开空白区域时也会保留?
其实还有一种方式。在 span 中的每个单词之前添加一个额外的空格将导致在浏览器中查看时文本不会合并为一个单词。
// no extra spaces
p This is some text
span foo
span bar
// extra space method
p This is some text
span foo
span bar
// JS literals method
p This is some text!{' '}
span foo
| !{' '}
span bar
Run Code Online (Sandbox Code Playgroud)
extra space 方法比我之前发布的 JS 文字方法更干净,但是它会导致将空白放置在 span 内部而不是它周围。
使用 extra space 方法生成以下 HTML:
<p>This is some text<span> foo</span><span> bar</span></p>
Run Code Online (Sandbox Code Playgroud)
使用 JS 文字方法生成此 HTML:
<p>This is some text <span>foo</span> <span>bar</span></p>
Run Code Online (Sandbox Code Playgroud)
不使用任何一种方法的 HTML 输出:
<p>This is some text<span>foo</span><span>bar</span></p>
Run Code Online (Sandbox Code Playgroud)
我已经找到了一个很好的解决方案:)
p This is some text!{' '}
span foo
| !{' '}
span bar
Run Code Online (Sandbox Code Playgroud)
!{} 哈巴狗本质上是指:
用javascript解释以下内容,并完全按照书面形式输出结果
因此,通过将其添加!{' '}到该行的末尾,它会在巴哥犬文本的末尾强制添加一个空白行,空白行将不会被空白修剪软件截断。