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 13 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
详解flex:1什么意思
Jul 23 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/10/30 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
老生常谈js数据类型
2017/08/03 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python Django模板的使用方法
2016/01/14 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
文明演讲稿范文
2014/05/12 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
付款证明格式范文
2015/06/19 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python