.cshtml中FontAwesome图标后出现'-'字符的问题求助

问题重现 #

我在Razor视图中编写了如下表格代码：

<thead>
        <tr>
            <th>
                <span class="handicap-headers">@Html.DisplayNameFor(model => sampleModel.PlayerName)</span>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameAsc" class="handicap-headers">
                    <i class="fas fa-sort-up bigger-fa-icons"></i>
                </a>
@*                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameDesc">
                    <i class="fas fa-sort-down bigger-fa-icons"></i>
                </a>*@
            </th>
            <th>
                @Html.DisplayNameFor(model => sampleModel.Current)
            </th>
            <th>
                <span class="handicap-headers">@Html.DisplayNameFor(model => sampleModel.HandicapForDisplay)</span>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.HandicapAsc" class="handicap-headers">
                    <i class="fas fa-sort-up bigger-fa-icons"></i>
                </a>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.HandicapDesc">
                    <i class="fas fa-sort-down bigger-fa-icons"></i>
                </a>
            </th>
            <th></th>
        </tr>
    </thead>


    <tbody>
        @foreach (var item in Model.PlayerHandicaps)
        {
            <tr>
                <td>
                    <a asp-controller="PlayerScore" asp-action="Index" asp-route-playerId="@item.PlayerId" asp-route-leaguePadId="@item.LeaguePadId">@Html.DisplayFor(modelItem => item.PlayerName)</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Current)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.HandicapForDisplay)
                </td>
            </tr>
        }
    </tbody>
</table>

遇到的问题：显示排序图标时，第一个图标后会出现奇怪的'-'字符。调整图标顺序后，该字符仍跟随第一个图标；仅保留单个图标时无此问题。

原因分析 #

这个'-'字符是Razor注释的残留空白被样式渲染导致的。你用@* ... *@注释掉了一个<a>标签，但注释块结束后，后面的换行、缩进等空白字符会被Razor输出到HTML中。如果你的CSS对<th>或.handicap-headers元素设置了特定的字体、空白处理规则，这些空白就可能被渲染成类似'-'的可见字符。

解决方案 #

有三种直接有效的修复方式：

1. 清理注释前后的空白 #

把注释块和相邻代码紧贴在一起，避免产生多余空白输出：

<th>
                <span class="handicap-headers">@Html.DisplayNameFor(model => sampleModel.PlayerName)</span>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameAsc" class="handicap-headers">
                    <i class="fas fa-sort-up bigger-fa-icons"></i>
                </a>@*
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameDesc">
                    <i class="fas fa-sort-down bigger-fa-icons"></i>
                </a>*@
            </th>

将结束注释符*@直接接在上一个<a>标签的闭合</a>后面，中间不留换行，Razor就不会输出多余空白。

2. 用文本标签抑制空白输出 #

在注释块前后添加@:或<text>标签，明确控制空白输出：

<th>
                <span class="handicap-headers">@Html.DisplayNameFor(model => sampleModel.PlayerName)</span>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameAsc" class="handicap-headers">
                    <i class="fas fa-sort-up bigger-fa-icons"></i>
                </a>
@*                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameDesc">
                    <i class="fas fa-sort-down bigger-fa-icons"></i>
                </a>*@
@:
            </th>

3. CSS样式调整 #

如果不想改动Razor代码，可以通过CSS修改空白处理规则：

th {
    white-space: nowrap;
    font-family: 你的项目默认字体; /* 避免特殊字体将空白渲染为短横线 */
}

这种方式属于治标，推荐优先修改Razor代码清理多余空白。

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