CSS中的text-overflow:clip|ellipsis的使用
2016-09-27 17:05
429 查看
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...,可以使用text-overflow:clip|ellipsis
基本语法:text-overflow : clip | ellipsis
若为text-overflow:clip 取默认值,不显示省略标记(...),而是简单的裁切
若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...)
例如:
注:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
基本语法:text-overflow : clip | ellipsis
若为text-overflow:clip 取默认值,不显示省略标记(...),而是简单的裁切
若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...)
例如:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> #box{ width:100px; background-color:#87CEEB; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } </style> </head> <body> <div id="box">helloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div> </body> </html>
注:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
相关文章推荐
- css小经验: 转载 - CSS文本溢出省略号:text-overflow:ellipsis
- CSS文本溢出:text-overflow:ellipsis
- (中文排版CSS心得)----固定宽度汉字截断 —— 使用text-overflow!
- 单行文本过长自动替换为省略号的css写法:text-overflow:ellipsis;
- css text-overflow使用技巧
- 使用text-overflow:ellipsis实现溢出文本省略号显示无需js
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- text-overflow样式属性值ellipsis的使用方法
- 溢出文本显示为省略号的效果及其text-overflow:ellipsis;的使用
- 使用text-overflow:ellipsis对溢出文本显示省略号
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- html,css-------关于firefox不支持text-overflow:ellipsis;的解决办法、、、、
- css基础 -文本溢出 text-overflow:ellipsis;
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- (中文排版CSS心得)----固定宽度汉字截断 —— 使用text-overflow
- ↗☻【css】text-overflow: ellipsis;
- 使用text-overflow:ellipsis实现文字超出用省略号显示
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- table表格中文本溢出text-overflow:ellipsis使用中td表格宽度失效问题