您现在的位置是：网站首页> 编程资料编程资料
CSS 超出隐藏实现限制字数的功能代码(多浏览器)_CSS教程_CSS_网页制作_
2021-09-08
903人已围观
简介 用时候为了有搜索引擎更喜欢网站，限制字数截取标题都是好办法。一般用超出隐藏，以免影响了整体布局。下面是多种浏览器下的写法。
CSS限制字数
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera */
-icab-text-overflow: ellipsis; /* for iCab */
-khtml-text-overflow: ellipsis; /* for Konqueror Safari */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
看了 上面的代码挺郁闷的，根本实现不了，看来好多站长对这种简单的代码都不测试就发了，郁闷。所以我们特别发一下我们自己用的，但firefox不兼容但可以使用，没有省略号。
提示：您可以先修改部分代码再运行
下面是用js实现的通过计算数字的长度进行截取的，但对于中文跟英文一样算一个，是肯定不行的了，以前发布过js计算字符串长度的，中文算两个字符的文章，可以参考下。
提示：您可以先修改部分代码再运行
这个是css after实现的
提示：您可以先修改部分代码再运行
参考文章：
https://www.jb51.net/article/15239.htm
https://www.jb51.net/article/14210.htm
复制代码
代码如下:overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera */
-icab-text-overflow: ellipsis; /* for iCab */
-khtml-text-overflow: ellipsis; /* for Konqueror Safari */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
看了 上面的代码挺郁闷的，根本实现不了，看来好多站长对这种简单的代码都不测试就发了，郁闷。所以我们特别发一下我们自己用的，但firefox不兼容但可以使用，没有省略号。
提示：您可以先修改部分代码再运行
下面是用js实现的通过计算数字的长度进行截取的，但对于中文跟英文一样算一个，是肯定不行的了，以前发布过js计算字符串长度的，中文算两个字符的文章，可以参考下。
提示：您可以先修改部分代码再运行
这个是css after实现的
提示：您可以先修改部分代码再运行
参考文章：
https://www.jb51.net/article/15239.htm
https://www.jb51.net/article/14210.htm
相关内容
- css的核心内容 标准流、盒子模型、浮动、定位等分析 _Web标准教程_CSS_网页制作_
- CSS 实现的图片宽高自适应固定边框_CSS教程_CSS_网页制作_
- IE下行框高度的问题 _CSS教程_CSS_网页制作_
- css 行级元素在多浏览器下的宽度问题 与解决方法_CSS教程_CSS_网页制作_
- CSS 多浏览器兼容性问题及解决方案_浏览器兼容教程_CSS_网页制作_
- CSS 速记口诀 可以解决一些常见问题_CSS教程_CSS_网页制作_
- css 背景图片定位在菜单效果中的应用实例_CSS教程_CSS_网页制作_
- CSS实现的图片宽高自适应固定边框_CSS教程_CSS_网页制作_
- CSS 多图片融合背景定位的应用于优缺点分析_CSS教程_CSS_网页制作_
- 利用CSS定位背景图片 background-position_CSS教程_CSS_网页制作_
