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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
django静态文件加载的方法
2018/05/20 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python之array赋值技巧分享
2019/11/28 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python列表解析操作实例总结
2020/02/26 Python
Python 在函数上添加包装器
2020/07/28 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
struct和class的区别
2015/11/20 面试题
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
五好党支部事迹材料
2014/02/06 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
跳蚤市场口号
2014/06/13 职场文书
委托书如何写
2014/08/30 职场文书
好人好事演讲稿
2014/09/01 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS