阿Zone
阿Zone
  • 发布:2020-01-05 02:00
  • 更新:2020-01-05 08:21
  • 阅读:311

多行文本溢出显示省略号,如何在uniapp使用这段JS代码?

分类:uni-app

想实现 多行文本溢出显示省略号,在网上看到这样一段代码, 如何在uniapp使用这段JS代码? 求大神指教

<script type="text/javascript">
const text = '这是一段很长的文本';
const totalTextLen = text.length;
const formatStr = () => {
const ele = document.getElementsByClassName('demo')[0];
const lineNum = 2;
const baseWidth = window.getComputedStyle(ele).width;
const baseFontSize = window.getComputedStyle(ele).fontSize;
const lineWidth = +baseWidth.slice(0, -2);

    // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)  
    const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));  

    let content = '';  

      // 多行可容纳总字数  
    const totalStrNum = Math.floor(strNum * lineNum);  

    const lastIndex = totalStrNum - totalTextLen;  

    if (totalTextLen > totalStrNum) {  
        content = text.slice(0, lastIndex - 3).concat('...');  
    } else {  
        content = text;  
    }  
    ele.innerHTML = content;  
}  

formatStr();  

    window.onresize = () => {  
    formatStr();  
};  

</script>

<body>
<div class='demo'></div>
</body>

2020-01-05 02:00 负责人:无 分享
已邀请:
5***@163.com

5***@163.com

了解

该问题目前已经被锁定, 无法添加新回复