开发小技巧：超长字数显示省略号CSS配置 

 1 .card-title {
 2     /* font-size: 15px; */
 3     font-size: 0.82vw;
 4     font-weight: bold;
 5 
 6     /* 一旦使用渐变色,文字超长的省略号效果就无法显示了,只能取消使用文字渐变色效果 */
 7     /* background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
 8     -webkit-background-clip: text;
 9     -webkit-text-fill-color: transparent; */
10 
11     /* 超长字数显示省略号CSS配置 */
12     /* 省略号关键代码 */
13     white-space: nowrap;
14     /* 禁止换行 */
15     overflow: hidden;
16     /* 隐藏溢出内容 */
17     text-overflow: ellipsis;
18     /* 显示省略号 */
19     width: 80%;
20     /* 必须有固定或最大宽度 */
21     /* 始终为字体大小的5% */
22     letter-spacing: 0.05em; 
23 
24 }

关键CSS配置：

 /* 超长字数显示省略号CSS配置 */
    /* 省略号关键代码 */
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    width: 80%;
    /* 必须有固定或最大宽度 */
 
最终卡片标题文字超长后，省略号显示的效果：

 

 

posted @ 2025-05-22 09:18  上清风  阅读(23)  评论(0)    收藏  举报