jQuery：根据链接计数将链接中的文本字符串限制为不同的值

我有一个（九）个flexboxed链接的单行列表，其中一些（五）由

.cstlnk

类标记，以表明它们可由最终用户自定义。基于

max device width:767px

mobile display（例如Galaxy Note 8），我知道我可以在它们之间分配约20个字符，以保持所有九个链接的美观（例如，单独链接之间的空格），并编写以下jQuery函数，就好像最终用户将使用所有五个自定义链接一样。如果使用少于五个自定义链接，如何最简洁地修改它，使每个链接具有更多字符？（我想我可以编写所有单独的if语句，但这需要很多行。）

谢谢

//作为参考，这是基于问题#24200493的文本函数答案
//html函数的答案对我不起作用
$（“.links.cstlnk”）.text（函数（i，currentText）{
返回$（this）.text（）.substring（0,4）
});
.infotxt{宽度：90%；填充：1em；背景：#eee；}
.infotxt.links{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}


询问
提交







您可以创建一个对象，使用链接数作为键，字符数作为值，然后根据链接元素的长度查找字符数

以下是松散开发的，可能需要应用更多的逻辑来满足您的需求，但应该为您提供一个良好的基本起点。我将matchMedia width设置为比您的要求更大的值，仅用于演示目的


const linkChars={
5:6，//伪值
4: 7,
3: 10
}
if（window.matchMedia（'（最大宽度：1600px'））{
常量$cstlinks=$（“.links.cstlnk”），
numLinks=$cstlinks.length，
numChars=linkChars[numLinks]；
如果（numLinks<6）{
$（“.links.cstlnk”）.text（函数（i，currentText）{
返回currentText.substring（0，numChars-1）
});
}
}
.infotxt{
宽度：90%；
填充：1em；
背景：#eee；
}
.infotxt.links{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}


询问
提交







[width 100%/li length]和[max width&overflow hidden]是解决方案


函数重置列表（）{
设li=$（'.list li'）；
控制台日志（li.长度）；
li.每个（函数（）{
$（this.css（'max-width'，$（this.parent（'.list'）.width（）/li.length）；
});
}
重置列表（）；
$（窗口）。打开（'调整大小'，重置列表）
.list{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
弯曲方向：行；
柔性包装：无包装；
证明内容：之间的空间；
背景：ddd；
填充：10px0；
}
李先生{
空白：nowrap；
文本对齐：居中；
填充物：5px；
溢出：隐藏；
}











经过一点修补，这就是我最终的工作。由于我知道允许的最大字符数（每个自定义链接，为了“舒适”的分隔），我定义了两个常量（使用
.cstlink
标识的自定义链接数，以及最大允许字符总数除以链接数的除法方程）；和将
子字符串设置为后一个常量，而不是4。请注意，注释掉五个
.cstlnk
元素中的两个会导致剩下的三个元素显示的字符串比我的问题帖子中的片段长。（正如CharlietFL的回答一样，为了演示，我增加了matchMedia的宽度。）

五秒钟的测试似乎表明，简单地将4改为除法方程，而不定义其中任何一个常数，也是一个有效的解决方案。两个版本都显示在下面的代码段中


$（函数（）{
让isMobile=window.matchMedia（“仅屏幕和（最大设备宽度：1600px）”）。匹配；
if（isMobile）{
常量numLinks=$（“.links.cstlnk”）.length，
trimChar=20/numLinks；
$（“.links.cstlnk”）.text（函数（i，currentText）{
return$（this）.text（）.substring（0，trimChar）//使用上述定义的常量
//或
返回$（this.text（）.substring（0,20/$（“.links.cstlnk”）.length）//不带常量
});
}
});
.infotxt{宽度：90%；填充：1em；背景：#eee；}
.infotxt.links{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}


询问
提交





在撰写本文时，我还没有尝试任何一种建议的解决方案，但现在我想知道，如果桌面用户调整窗口大小，窗口大小调整线是否允许在桌面和移动显示器之间进行动态切换。不知何故，我怀疑答案是否定的。将jQuery放到我的网站上是不可行的，但我担心我不能完全在心里翻译它，也不知道要修改哪些部分才能使它工作。你为
linkChars
和
numChars
写的东西对我来说是非常新鲜的；我在查找更多信息时遇到一些问题。这与执行
let obj={'a'：1）；console.log（obj['a']）//返回1相同