基于jQuery根据自定义链接数量动态限制链接文本长度

嘿，不用写一堆if-else，咱们用动态计算的方式就能搞定这个需求！

核心思路 #

咱们的目标是总共分配约20个字符给自定义链接，那直接用总字符数除以自定义链接的数量，就能得到每个链接能显示的最大字符数了——不管有3个、4个还是5个自定义链接，这个逻辑都通用，完全不用搞一堆条件判断。

修改后的代码实现 #

首先是关键的jQuery代码，逻辑很清晰：

// 先统计页面上自定义链接的总数
const customLinkCount = $(".links .cstlnk").length;
// 计算每个链接可分配的最大字符数（总20字符均分，取整避免小数）
const maxChars = Math.floor(20 / customLinkCount);

// 给每个自定义链接应用截断逻辑
$(".links .cstlnk").text(function(i, currentText) {
  return currentText.substring(0, maxChars);
});

下面是完整的可运行示例，包含HTML、CSS和JS：

<style>
.infotxt {width:90%; padding:1em; background:#eee;}
.infotxt.links { 
  list-style:none; 
  display:flex; 
  flex-direction:row; 
  justify-content:space-between; 
}

/* 移动端额外适配，防止极端情况溢出 */
@media screen and (max-device-width:767px) {
  .infotxt.links {
    flex-wrap: wrap;
  }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="infotxt links">
<li id="ask">ask</li>
<li id="sub">submit</li>
<li class="cstlnk"><a href="">1longstring1thatisreallylong</a></li>
<li class="cstlnk"><a href="">2longstring2thatisreallylong</a></li>
<li class="cstlnk"><a href="">3longstring3thatisreallylong</a></li>
<!-- 可以注释/取消注释下面的链接来测试不同数量的效果 -->
<!-- <li class="cstlnk"><a href="">4longstring4thatisreallylong</a></li> -->
<!-- <li class="cstlnk"><a href="">5longstring5thatisreallylong</a></li> -->
<li><a href="">dash</a></li>
<li><a href="">thm</a></li>
</ul>
<script>
const customLinkCount = $(".links .cstlnk").length;
const maxChars = Math.floor(20 / customLinkCount);

$(".links .cstlnk").text(function(i, currentText) {
  return currentText.substring(0, maxChars);
});
</script>

效果验证 #

• 当有5个自定义链接时，20÷5=4，每个链接截断到4字符，和你原来的需求一致；
• 如果只有3个自定义链接，20÷3≈6，每个链接最多显示6字符；
• 要是只有2个，每个就能显示10字符，完美利用分配的总宽度，布局不会空落落的。

另外加了移动端的flex-wrap样式，防止极端情况下字符还是溢出的问题，更稳妥~

内容的提问来源于stack exchange，提问作者Nintendraw