文字固定行数超出省略号展示

仔仔
代码仓库
2023-10-10
1513热度
0评论

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字固定行数 超出省略号展示</title>
</head>

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

</html>
<script type="text/javascript">
const text =
    '文的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本.txt';
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 = '';
    let suffix = text.split('.')[text.split('.').length - 1];
    // 多行可容纳总字数
    const totalStrNum = Math.floor(strNum * lineNum);

    const lastIndex = totalStrNum - totalTextLen;

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

formatStr();

window.onresize = () => {
    formatStr();
};
</script>

文字固定行数 超出省略号展示

文字固定行数超出省略号展示