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中的5个有趣的新技术
Apr 02 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 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
文件系统基本操作类
2006/11/23 PHP
php 随机生成10位字符代码
2009/03/26 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php学习笔记之基础知识
2014/11/08 PHP
php bootstrap实现简单登录
2016/03/08 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python多进程控制学习小结
2018/10/31 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
keras之权重初始化方式
2020/05/21 Python
Python爬虫开发与项目实战
2020/12/16 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
总裁秘书岗位职责
2013/12/04 职场文书
初中英语课后反思
2014/04/25 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
红色故事汇观后感
2015/06/18 职场文书
导游词之西安骊山
2019/12/20 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python