CSS/JS-ios 文本渐变色 和 文本超出省略号处理 共用时，出现省略号未显示问题
一、前言 ⭐️
最近写项目，发现一个
bug：ios文本渐变色 和 文本超出省略号处理 共用时，出现省略号未显示问题，如下图：图1是非ios真机，图2是ios真机（省略号未展示）。
二、对应代码分析 ⭐️
.title {width: 100%;font-size: 60px;/** 文本居中 */text-align: center;/** 文本渐变色 */background: linear-gradient(to bottom, @color1, @color2);-webkit-background-clip: text;color: transparent;/** 文本超出省略号处理 */text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
（一）、原因分析
1、不存在省略号，消失了 ❎
由上面代码可知：因为含有文本居中:
text-align: center;，所以若省略号是直接消失了的话，上图二的文本应居中展示才对😄；
但通过观察可知，上图二的文本并非水平居中，且右侧留有省略号的位置🏠；
至此，该推论错误。
2、省略号存在，但由于某原因视觉上未显示 ✅
观察上面代码可知：实现文本渐变色的地方用到了
color: transparent;（颜色透明），经过注释该行代码，省略号得以显现🤣；
所以，推测省略号是存在滴，但由于ios的部分机制原因，使得超出省略号处理的省略号未加上渐变色，所以保留了透明色🖌。
至此，该推论正确。
三、解决方法 ⭐️
从
css上找突破口滴方法，我还没有想到；目前可行滴就是从js出发：文本超出几个字符滴就保留n个字符（据自己需求而定），其后加字符串"..."。
如下：若文本超出
6个字符，就截取5个字符，其后加字符串"..."；若未超出，则展示原文本。
text?.length > 6 ? text?.slice(0, 5) + '...' : text
还有，若有其余好的解决方法，欢迎评论区告知一下呢！谢谢啦~ 🤕
