萧寂

js控制超出一定宽度显示省略号

html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本截取示例</title>
    <style>
        #text-container {
            /* width: 200px; */
            white-space: nowrap;
            overflow: hidden;
            border: 1px solid #ccc;
            padding: 5px;
        }
    </style>
</head>
<body>
    <span id="text-container"></span>

    <script>
        function truncateText(text, containerWidth, truncateWidth) {
            const container = document.getElementById('text-container');
            let truncatedText = text;

            // 创建一个临时的span元素来测量文本宽度
            const tempSpan = document.createElement('span');
            tempSpan.style.whiteSpace = 'nowrap';
            tempSpan.style.visibility = 'hidden'; // 隐藏元素，但不影响布局
            document.body.appendChild(tempSpan); // 将span添加到DOM中以测量宽度

            // 如果文本宽度超过容器宽度，则开始截断
            if (measureTextWidth(tempSpan, text) > containerWidth) {
                let currentWidth = 0;
                let index = 0;
                const ellipsis = '…';

                // 逐个字符尝试，直到找到最佳的截断位置
                while (index < text.length && currentWidth < truncateWidth) {
                    tempSpan.textContent = text.substring(0, index + 1) + ellipsis;
                    currentWidth = measureTextWidth(tempSpan, tempSpan.textContent);
                    index++;
                }

                // 回退一步，因为最后一次循环可能超过了截断宽度
                index--;
                truncatedText = text.substring(0, index) + ellipsis;
            }

            container.textContent = truncatedText;
            document.body.removeChild(tempSpan); // 移除临时的span元素
        }

        // 辅助函数，用于测量文本的宽度
        function measureTextWidth(element, text) {
            element.textContent = text;
            return element.offsetWidth;
        }

        const text = '这是一个非常长的字符串，需要在一定宽度之后用省略号表示超出部分。';
        truncateText(text, 200, 150); // 在150px处开始考虑截断，容器宽度为200px(如果只需要截取文字不需要考虑容器宽度,只需要根据多少px的宽度去截取文字,则直接把参数二和参数三的值设置为一样的即可,这样的话就是文字在多少px处被截断,如果不满足这个长度则不会被截取)
    </script>
</body>
</html>
js控制超出一定宽度显示省略号 ​

js控制超出一定宽度显示省略号
