[JS]实现固定字数加省略号效果

项目中需要用到对介绍的文字进行省略的一个效果，点击展开图标的时候在内容再全部展开，如下：

字数省略1.png

HTML:

<div id="introFont">
     西湖，位于浙江杭州西，世界文化遗产地，国务院首批公布的国家重点风景名胜区，全国首批十大文明风景旅游区和国家AAAAA级旅游景区。西湖三面云山，中涵碧水，面积约60平方公里，其中湖面6.5平方公里。
</div>

JS 超过字数隐藏，点击图标展开

   //西湖的介绍文字的相关js
    let introFont = document.getElementById("introFont");
    if (introFont && introFont.innerHTML.length > 40) {
      introFont.innerHTML = introFont.innerHTML.substring(0,44)+ "......"
    }
  //点击西湖小三角的时候内容显示出来
    let threeicon = document.getElementById("threeicon");
    if(threeicon){
      threeicon.onclick = function(){
    //点击图标的时候图标隐藏，内容显示
        threeicon.style.display="none"
        introFont.innerHTML = " 西湖,位于浙江杭州西,世界文化遗产地,国务院首批公布的国家重点风景名胜区,全国首批十大文明风景旅游区和国家AAAAA级旅游景区.西湖三面云山,中涵碧水,面积约60平方公里,其中湖面6.5平方公里。"
      }
    }
  

注意：

1.其中introFont获取到的是一个完整的标签，introFont.innerHTML获取的是标签的内容，只有获取到内容之后才能.length判断字数，有的人会报错不能读取到这个属性是因为没有.innerHTML

2.有的教程将 introFont.innerHTML = introFont.innerHTML.substring(0,44)+ "......"这行内容直接写成return introFont.innerHTML.substring(0,44)+ "......",这样是在我页面是不生效的，所以重新定义一下标签中的内容重新赋值，最好不要省略掉 introFont.innerHTML

3.对于展开内容代码段采用标签.innerHTML="文字"的方法，有的教程中的写法是 introFont.innerHTML = introFont.innerHTML.substring(0,70)但是这种方法在我的页面不生效，所以如果这种写法不生效文字少的时候可以换成我上面的写法