超出最大距离，背景渐变

超出最大距离，背景渐变

问题描述

有的时候项目中有以下需求，如下图：


当字数超出一定距离需要用渐变的效果；

问题分析

这种效果其实有很多种方式实现，比如：

1. 给元素设置最大长度，当页面渲染完成之后，判断元素的宽度是否达到最大宽度，给元素后面加一个渐变的背景盖在文字上；但是这种方式不太灵活，我们的需求是这个渐变是根据页面的主题色来的，是随时可配置的；

解决方案

以下是用 css 的解决方案达到，颜色可以随意改变；

<!--html-->
<text class="address-name" style="background: linear-gradient(90deg, #ffffff 330rpx, {{secondColor}} 100%);-webkit-background-clip: text;color: transparent;">{{addressName}}</text>

<!-- css 样式-->
.address-name{
    font-size: 32rpx;
    font-weight: bold;
    display: inline-block;
    max-width: 372rpx;
    height: 32rpx;
    overflow: hidden;
}

以上方法主要利用的是’-webkit-background-clip’ 属性，并且顺序不能交换，看真实效果，查看 多点 小程序；