Razor中多行Span标签的空格问题及解决诉求

当你在Razor里把Span内容拆成多行并使用@if语句时，换行和缩进会被解析成HTML空白字符，导致输出值之间出现多余空格。以下是几种实用解决方式：

方法1：使用Razor空白抑制语法 #

在代码块的大括号前后添加-，可以抑制该位置的空白输出：

<span class="my_value">
    @value.Name
    @if(true) {-
        @something
    -}
</span>

{-会吃掉@if前面的换行空白，-}会吃掉代码块结束后的换行空白，最终输出不会有多余空格。

方法2：用Razor代码块包裹所有输出逻辑 #

把Span内的所有动态内容放到@{}代码块里，Razor会自动紧凑拼接输出内容，不会插入多余空白：

<span class="my_value">
    @{
        @value.Name;
        if(true) {
            @something
        }
    }
</span>

方法3：消除代码间的换行空白 #

直接把@value.Name和@if连在一起写，去掉中间的换行和缩进：

<span class="my_value">
    @value.Name@if(true) {
        @something
    }
</span>

这种方式简单直接，适合逻辑不复杂的场景。

方法4：使用<text>标签包裹输出内容 #

用<text>标签包裹每个动态输出部分，避免换行被解析为空白：

<span class="my_value">
    <text>@value.Name</text>
    @if(true) {
        <text>@something</text>
    }
</span>

注意要确保<text>标签和内容之间没有多余换行，否则仍可能出现空白。

内容的提问来源于stack exchange，提问作者dodo