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 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 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 number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP Session机制简介及用法
2014/08/19 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
js tab效果的实现代码
2009/12/26 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python 线程池用法简单示例
2019/10/02 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
python实现飞机大战项目
2020/03/11 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
生物专业个人自荐信范文
2013/11/29 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
小学班主任评语大全
2014/04/23 职场文书
银行求职自荐信
2014/06/30 职场文书
单位单身证明样本
2014/10/11 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
2019年最新借条范本!
2019/07/08 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers