控制台列对齐字符串在Blazor Razor页面显示时对齐丢失的原因

为什么对齐效果丢失？ #

核心原因有两个：

• 字体差异：控制台默认使用等宽字体（如Consolas、Courier New），每个字符（包括空格）宽度完全一致，格式化后的对齐效果能精准生效；但网页默认用变宽字体（如Arial、微软雅黑），不同字符宽度不同，空格宽度也远窄于等宽字体，对齐自然失效。
• HTML空白处理规则：HTML会自动合并多个连续空格、换行符为单个空格，控制台输出里用来对齐的多空格被直接压缩，原本的对齐结构被破坏。

解决办法 #

根据需求，有几种可行方案：

方案1：用<pre>标签还原控制台格式 #

<pre>标签会保留文本原始空白和换行，且默认使用等宽字体，完美还原控制台输出效果：

<pre>
@foreach (var line in item_values.Where(line => !string.IsNullOrWhiteSpace(line)))
{
    @line
}
</pre>

方案2：设置等宽字体+保留空白 #

不想用<pre>的话，可通过CSS强制使用等宽字体并保留空白：

<style>
.aligned-text {
    font-family: monospace;
    white-space: pre; /* 保留换行和连续空格 */
}
</style>

@foreach (var line in item_values.Where(line => !string.IsNullOrWhiteSpace(line)))
{
    <div class="aligned-text">@line</div>
}

方案3：拆分为表格列（更适配网页） #

如果要做表格展示，别把整行塞进单个<td>，拆分CLSID和ProgId到不同单元格，用表格自然对齐：

1. 后台拆分每行内容：

// 读取输出后处理数据
var serverList = item_values
    .Where(line => !string.IsNullOrWhiteSpace(line))
    .Select(line => 
    {
        var splitIndex = line.IndexOf(").ProgId: ");
        if (splitIndex > 0)
        {
            var clsidPart = line.Substring(17, splitIndex - 17).Trim('"'); // 截取CLSID部分
            var progId = line.Substring(splitIndex + 10); // 截取ProgId部分
            return new { Clsid = clsidPart, ProgId = progId };
        }
        return null;
    })
    .Where(item => item != null)
    .ToList();

2. Razor页面渲染表格：

<table border="1" cellpadding="4">
    <thead>
        <tr>
            <th>CLSID</th>
            <th>ProgId</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var server in serverList)
        {
            <tr>
                <td>@server.Clsid</td>
                <td>@server.ProgId</td>
            </tr>
        }
    </tbody>
</table>

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