为何HTML日志插入时首行开头会出现空格？

问题描述 #

通过StreamReader读取.log文件内容并展示在单独网页中，经排查问题并非出在C#控制器，但网页显示的日志首行开头存在空格，且额外多了两行空白内容。即使调试时仅导入两行日志，该问题仍存在。

相关代码 #

HTML视图代码 #

<h2>Logs</h2>
<div class="logs-container">
    <input type="text" id="search-input" placeholder="搜索..." />
    <pre id="logs-content">
        @Html.Raw(Model.TrimStart())
    </pre>
</div>

C#控制器代码 #

public IActionResult Logs()
{
    // 将"chemin_du_fichier"替换为实际日志文件路径
    string logFilePath = "Logs\\FlexiArmLog-" + DateTime.Now.ToString("yyyyMMdd") + ".log";
    string logContent;

    using (var fileStream = new FileStream(logFilePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
    using (var streamReader = new StreamReader(fileStream))
    {
        logContent = streamReader.ReadToEnd();
    }
    // 移除日志首行开头的空白字符
    logContent = logContent.TrimStart();

    return View("Logs", logContent);
}

问题根源与解决 #

问题出在HTML的<pre>标签上：<pre>会严格保留所有空白字符（包括换行、缩进空格），当前代码中<pre>标签内部的换行和@Html.Raw前的缩进空格，都会被渲染成页面上的空白行和首行空格。

解决步骤：

1. 消除<pre>标签内的多余换行和缩进，将@Html.Raw与<pre>标签内容放在同一行
2. 控制器已执行TrimStart()处理日志内容，视图无需重复调用

修改后的HTML代码：

<pre id="logs-content">@Html.Raw(Model)</pre>

调整后页面展示的日志内容将与原文件一致，不会出现多余空白行和首行空格。

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