开发小技巧：超长字数显示省略号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%;

    /* 必须有固定或最大宽度 */

 

最终卡片标题文字超长后，省略号显示的效果：