diff --git a/src/pages/health/activity/list.vue b/src/pages/health/activity/list.vue index a59d52a..2e0e283 100644 --- a/src/pages/health/activity/list.vue +++ b/src/pages/health/activity/list.vue @@ -454,21 +454,26 @@ function previewAttachment(urls, index) { // 活动特有 - 卡片头部布局 .item-header { gap: 12rpx; + /* 允许 header 内容换行,避免长地点/长名字被省略号截断 */ + align-items: flex-start; .place-info { flex: 1; min-width: 0; display: flex; - align-items: center; + align-items: flex-start; .place-text { color: #ffffff; font-size: 30rpx; font-weight: 500; line-height: 1.3; + /* 长地点名称最多2行后省略 */ + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + word-break: break-all; } } @@ -489,9 +494,10 @@ function previewAttachment(urls, index) { .name-section { display: flex; - align-items: center; - flex: 1; + align-items: flex-start; + flex: 0 1 auto; min-width: 0; + max-width: 40%; justify-content: flex-end; .name-value { @@ -499,9 +505,13 @@ function previewAttachment(urls, index) { font-size: 30rpx; font-weight: 700; line-height: 1.3; - white-space: nowrap; + /* 长活动名最多2行后省略 */ + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; overflow: hidden; - text-overflow: ellipsis; + word-break: break-all; + text-align: right; letter-spacing: 0.5rpx; } } diff --git a/src/styles/health-common.scss b/src/styles/health-common.scss index 8d92f2e..5456cce 100644 --- a/src/styles/health-common.scss +++ b/src/styles/health-common.scss @@ -354,10 +354,12 @@ page { font-size: 30rpx; font-weight: 700; line-height: 1.3; - white-space: nowrap; + /* 超长药品名称自动换行,最多 3 行后省略 */ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 0; + word-break: break-all; letter-spacing: 0.5rpx; } @@ -459,6 +461,8 @@ page { .info-row { display: flex; flex-wrap: wrap; + /* 关键:使用 flex-start 顶部对齐,避免同行两个 item 超长换行后高度不齐 */ + align-items: flex-start; margin: 0 -12rpx; .info-item { @@ -491,12 +495,16 @@ page { flex: 1; line-height: 1.5; word-break: break-all; + white-space: normal; } + /* 两列布局下也允许换行(内容起长时撑开多行) */ &:not(.info-item-full) .info-value { + /* 超过 4 行后省略号截断,避免某个超长字段把整个卡片撑得太高 */ + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } } }