2023-04-13 工作记录--CSS/JS-ios 文本渐变色 和 文本超出省略号处理 共用时，出现省略号未显示问题

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

还有，若有其余好的解决方法，欢迎评论区告知一下呢！谢谢啦~