CSS实现限制字数功能当对象内文本溢出时显示省略标记


Posted in HTML / CSS onAugust 20, 2014

复制代码
代码如下:

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>

效果:
CSS实现限制字数功能当对象内文本溢出时显示省略标记 

语法:

text-overflow : clip | ellipsis

参数:

clip :  不显示省略标记(...),而是简单的裁切

(clip这个参数是不常用的!)

ellipsis :  当对象内文本溢出时显示省略标记(...)

说明:

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

示例:

div { text-overflow : clip; }

text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。

有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,

复制代码
代码如下:

white-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!-- 就这三句,,,嘿嘿....->
HTML / CSS 相关文章推荐
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 #HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 #HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 #HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 #HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP编码规范-php coding standard
2007/03/16 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python多线程使用方法实例详解
2019/12/30 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
事业单位分类改革实施方案
2014/03/21 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏