hookehuyr

fix(样式): 修复排行榜卡片中文本溢出问题

为排行榜卡片中的名称和标题添加文本溢出处理,包括设置最大宽度、溢出隐藏、省略号显示和多行文本截断,确保长文本在有限空间内正常显示
<!--
* @Date: 2025-01-09 00:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-18 18:05:13
* @LastEditTime: 2025-09-18 18:09:26
* @FilePath: /lls_program/src/components/RankingCard.vue
* @Description: 排行榜卡片组件
-->
......@@ -578,6 +578,15 @@ defineExpose({
font-weight: 600;
margin-bottom: 6rpx;
text-align: center;
max-width: 120rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
line-height: 1.2;
max-height: 48rpx;
}
.leader-name {
......@@ -585,6 +594,15 @@ defineExpose({
font-size: 16rpx;
margin-bottom: 12rpx;
text-align: center;
max-width: 120rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
line-height: 1.2;
max-height: 38rpx;
}
.rank-number {
......@@ -722,11 +740,19 @@ defineExpose({
font-weight: 600;
color: #333;
margin-bottom: 6rpx;
max-width: 200rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-leader-name {
font-size: 20rpx;
color: #666;
max-width: 200rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
......
<!--
* @Date: 2025-09-01 13:07:52
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-18 18:04:42
* @LastEditTime: 2025-09-18 18:13:49
* @FilePath: /lls_program/src/pages/FamilyRank/index.vue
* @Description: 文件描述
-->
......@@ -581,6 +581,15 @@ onMounted(async () => {
font-weight: 600;
margin-bottom: 8rpx;
text-align: center;
max-width: 140rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
line-height: 1.2;
max-height: 58rpx;
}
.leader-name {
......@@ -588,6 +597,15 @@ onMounted(async () => {
font-size: 20rpx;
margin-bottom: 16rpx;
text-align: center;
max-width: 140rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
line-height: 1.2;
max-height: 48rpx;
}
.rank-number {
......@@ -732,11 +750,19 @@ onMounted(async () => {
font-weight: 600;
color: #333;
margin-bottom: 8rpx;
max-width: 300rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.leader-name-small {
font-size: 24rpx;
color: #666;
max-width: 300rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
......@@ -843,11 +869,19 @@ onMounted(async () => {
font-weight: 600;
color: #333;
margin-bottom: 8rpx;
max-width: 250rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-leader-name {
font-size: 24rpx;
color: #666;
max-width: 250rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
......