自定义.NET健康检查UI：调整标签列宽度解决文本溢出问题

针对你遇到的健康检查UI标签列文本截断、多标签重叠的问题，可通过调整CSS布局来解决，以下是两种实用方案：

方案1：允许标签自动换行，完整显示文本 #

修改flex容器的布局属性，让标签在空间不足时自动换行，同时优化单个标签的文本换行规则：

/* 调整标签容器的flex布局，开启换行并添加间距 */
.hc-checks-table__body td > * {
    display: flex;
    flex-wrap: wrap; /* 允许标签换行 */
    gap: 0.5rem; /* 标签间添加间距，避免重叠 */
    min-width: 160px; /* 设置列的最小宽度，防止过窄，可按需调整 */
}

/* 确保单个标签内的长文本能自动换行 */
.hc-checks-table__body td > * > span {
    white-space: normal; /* 取消强制不换行 */
    word-break: break-word; /* 长单词自动拆分换行 */
    padding: 0.25rem 0.6rem; /* 保持内边距，让背景色完整包裹文本 */
}

方案2：固定列宽，支持横向滚动或省略号显示 #

如果希望保持列宽固定，可选择让标签区域横向滚动，或对超长文本显示省略号：

子方案2.1：横向滚动显示所有标签 #

/* 固定标签列宽度（替换为标签列对应的索引，比如第2列就写2） */
.hc-checks-table__body td:nth-child(2) {
    width: 280px;
    max-width: 280px;
}

/* 标签容器开启横向滚动 */
.hc-checks-table__body td > * {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto; /* 超出时显示横向滚动条 */
    padding-bottom: 0.3rem; /* 避免滚动条遮挡标签 */
}

子方案2.2：超长文本显示省略号（单标签场景） #

/* 固定列宽，超出文本显示省略号（替换为标签列对应的索引） */
.hc-checks-table__body td:nth-child(2) {
    width: 280px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如何应用自定义CSS #

将上述CSS代码保存为healthchecks-custom.css文件，放在项目的wwwroot/css目录下，然后在Program.cs中配置健康检查UI时引用该样式：

app.UseHealthChecksUI(options =>
{
    options.UIPath = "/healthchecks-ui";
    options.AddCustomStylesheet("/css/healthchecks-custom.css");
});

根据你的实际需求选择方案：如果需要完整显示所有标签文本，优先选方案1；如果希望页面布局更紧凑，可选择方案2的子方案。

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