diff --git a/LTEMvcApp/Views/Home/Logs.cshtml b/LTEMvcApp/Views/Home/Logs.cshtml
index 06ab598..6a0ebf9 100644
--- a/LTEMvcApp/Views/Home/Logs.cshtml
+++ b/LTEMvcApp/Views/Home/Logs.cshtml
@@ -37,8 +37,10 @@
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
display: flex;
- justify-content: space-between;
- white-space: nowrap;
+ justify-content: flex-start; /* 改为左对齐 */
+ align-items: flex-start; /* 顶部对齐,支持多行内容 */
+ min-height: 24px; /* 最小高度 */
+ transition: background-color 0.2s;
}
.log-item:hover {
@@ -52,21 +54,64 @@
.log-item > span, .log-list-header > span {
text-overflow: ellipsis;
overflow: hidden;
- padding-right: 15px;
+ padding-right: 8px;
+ white-space: nowrap; /* 保持单行显示 */
+ word-break: keep-all; /* 防止单词被截断 */
}
- /* 列宽定义:固定与弹性结合 */
- .log-timestamp { flex: 0 0 170px; } /* 固定宽度 */
- .log-layer { flex: 0 0 100px; } /* 固定宽度 */
- .log-direction { flex: 0 0 120px; } /* 固定宽度 */
- .log-ueid { flex: 0 0 80px; } /* 固定宽度 */
- .log-rnti { flex: 0 0 80px; } /* 固定宽度 */
- .log-cell { flex: 0 0 80px; } /* 固定宽度 */
- .log-channel { flex: 0 0 100px; } /* 固定宽度 */
- .log-info { flex: 0 0 80px; } /* 固定宽度 */
+ /* 列宽定义:自适应宽度 */
+ .log-timestamp {
+ flex: 0 0 auto;
+ min-width: 150px;
+ max-width: 200px;
+ }
+ .log-layer {
+ flex: 0 0 auto;
+ min-width: 80px;
+ max-width: 120px;
+ }
+ .log-direction {
+ flex: 0 0 auto;
+ min-width: 60px;
+ max-width: 100px;
+ }
+ .log-ueid {
+ flex: 0 0 auto;
+ min-width: 60px;
+ max-width: 100px;
+ }
+ .log-rnti {
+ flex: 0 0 auto;
+ min-width: 60px;
+ max-width: 100px;
+ }
+ .log-cell {
+ flex: 0 0 auto;
+ min-width: 60px;
+ max-width: 100px;
+ }
+ .log-channel {
+ flex: 0 0 auto;
+ min-width: 80px;
+ max-width: 120px;
+ }
+ .log-info {
+ flex: 0 0 auto;
+ min-width: 60px;
+ max-width: 100px;
+ }
.log-message {
- flex: 1 1 0; /* 弹性增长和收缩,占据剩余空间 */
- min-width: 150px; /* 保证最小宽度 */
+ flex: 1 1 auto; /* 弹性增长和收缩,占据剩余空间 */
+ min-width: 200px; /* 保证最小宽度 */
+ max-width: none; /* 不限制最大宽度 */
+ white-space: normal; /* 允许换行 */
+ word-break: break-word; /* 长单词可以换行 */
+ line-height: 1.4; /* 增加行高 */
+ max-height: 3.2em; /* 最多显示2行 */
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* 限制显示行数 */
+ -webkit-box-orient: vertical;
}
/* 日志列表标题栏 */