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常用功能的写法
Jun 05 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 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
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python中的包和模块实例
2014/11/22 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
详解python数据结构和算法
2019/04/18 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
高中打架检讨书
2014/02/13 职场文书
汽车广告策划方案
2014/05/31 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript