<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>
效果:
语法:
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; <!-- 就这三句,,,嘿嘿....->
- 大小: 4.8 KB
分享到:
相关推荐
CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行...
CSS3实现可缩放显示菜单.zip
bootstrap.min.css
效果描述: 类似loading动画效果,当用户在点击提交表单的时候,文字后面的点点点会以此出现 模仿一个loading动画效果,非常不错 ...1、将index.html 中的CSS样式拷贝过去 2、将body中的代码部分拷贝过去即可
base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css ...
CSS(js)限制页面显示的文本字符长度.docx
点击“more”显示更多隐藏文字内容,渐渐显示,在IE 等不支持CSS3浏览器下效果较差,建议在火狐浏览器下浏览,懒人之家推荐下载
CSS制作液晶屏的显示效果,可以的显示效果,数字累加
CSS3鼠标悬停下划线显示特效.zip
CSS3 SVG叶子虚线显示特效.zip
CSS3明信片悬停翻转显示文字.zip
css3 transition图文动画显示特效.zip
1.CSS背景试验1.doc 2.CSS背景试验2.doc 3.CSS颜色.doc 4.CSS文字.doc 5.CSS文本.doc 6.CSS列表.doc 7.CSS边框.doc 8.CSS填充(padding).doc ...14.CSS显示.doc 15.CSS可视性.doc 16.CSS浮动.doc 17.CSS清除浮动.doc
主要介绍了CSS实现限制字数功能当对象内文本溢出时显示省略标记,需要的朋友可以参考下
CSS3高亮显示.zip,文字发光特效,css3,自己体会......
用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar
纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar纯CSS代码实现的图片列表滚动.rar