纯CSS 实现超长省略号

2020-12-16 乐帮网

css

在网页上实现内容超过长度后自动显示省略号，这个问题可以使用CSS直接实现。

核心实现CSS样式如下：

width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

优点：简单易用
缺点：支持ie8+ （好像这就够了）

一段完整的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> css 超出部分显示省略号</title>
</head>
<body>
<div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div>
重点样式是 text-overflow: ellipsis; <br />

text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
</body>
</html>

还有一种JS实现法，不过不推荐


function AutoTrim(){
    $(".labText").each(function(){
        var nowLen = $(this).html().length;
        var width=$(this).css("width").replace("px","")-0;
        var needLen = width/10;
        if(nowLen > needLen){
            var nowWord = $(this).html().substr(0,needLen)+'...';
            $(this).html(nowWord);
        }
    });
}

大体意思就是根据字符的长度判断超长不，如果超长了就把结尾截取掉，然后添加省略号。

优点：兼容性好
缺点：
1、如果文字是字母的话，计算会不准确。
2、须在内容填充之后执行截取。

3、添加指定的截取太麻烦。

相关内容：2020年15个最佳CSS框架推荐

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力