文字超过宽度显示省略号（js版）

最近一直纠结于文字超过后显示省略号的问题，text-ellipsis只有ie支持（日，干嘛这么多浏览器），最后想到一个js解决办法，ie、chrome、ff测试通过，而且可以根据需要来判断是不是要显示提示文字，个人认为还不错，呵呵，不罗嗦了，上代码

?
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
         
        <style type="text/css">
            * {
                font-size: 9pt;
            }
             
            .container {
                overflow: hidden;
                background: #f1f1f1;
                white-space: nowrap;
            }
             
            .container .label {
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
         
        <script type="text/javascript">
            function getText(el) {
                return el.innerText || el.textContent;
            }
             
            function setText(el, text) {
                if (el.innerText) {
                    el.innerText = text;
                } else if (el.textContent) {
                    el.textContent = text;
                }
            }
         
            function updateEllipsis(container, label) {
                if (container.scrollWidth > container.offsetWidth) {
                    var text = getText(label);
                    //此处重要，利用container的实际宽度和显示宽度的比例计算出文字显示的个数，然后，截取出来并在末位加上...
                    var len = container.offsetWidth / container.scrollWidth * text.length;
                    setText(label, text.substring(0, Math.floor(len) - 1) + "...");
                    label.title = text;
                } else {
                    if (label.title != "") {
                        setText(label, label.title);
                        label.title = "";
                    }
                }
            }
             
            function init() {
                var div1 = document.getElementById("div1");
                var lab1 = document.getElementById("lab1");
                updateEllipsis(div1, lab1);
                 
                 
                var div2 = document.getElementById("div2");
                var lab2 = document.getElementById("lab2");
                updateEllipsis(div2, lab2);
                 
                var div3 = document.getElementById("div3");
                var lab3 = document.getElementById("lab3");
                updateEllipsis(div3, lab3);
                 
            }
        </script>
    </head>
     
    <body onload="init();">
        <div class="container" style="width: 80px" id="div1">
            <label class="label" id="lab1">自动显示省略号</label>
        </div>
     
        <br/>
        <br/>
     
        <div class="container" style="width: 100px" id="div2">
            <label class="label" id="lab2">hello,这是一个测试</label>
        </div>
         
        <br/>
        <br/>
         
        <div class="container" style="width: 100%" id="div3">
            <label class="label" id="lab3">百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果</label>
        </div>
         
    </body>
</html>

上面的代码只是起到抛砖引玉的作用，很多地方还可以完善，比如说支持多行的，等等（转载请注明出处，谢谢）

posted @   bcbr_wang  阅读(6067)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae