当前阅读教程:CSS3教程 > text-overflow 属性 | |||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||
上一篇: text-align-last属性 | 下一篇: text-shadow 文本阴影 | ||||||||||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 属性定义及使用说明text-overflow属性指定当文本溢出包含它的元素,应该发生什么。
语法text-overflow: clip|ellipsis|string; 值属性
实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>text-overflow 属性</title> <!--定义内部样式--> <style> .test { white-space:nowrap; /*不换行*/ width:12em; /*宽度*/ overflow:hidden; /*溢出隐藏*/ border:1px solid #000000;/*边框*/ } </style> </head> <body> <p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p> <p>div 使用 "text-overflow:ellipsis":</p> <div style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> <p>div 使用 "text-overflow:clip":</p> <div style="text-overflow:clip;">This is some long text that will not fit in the box</div> <p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p> <div style="text-overflow:'>>';">This is some long text that will not fit in the box</div> </body> </html> 效果图 |
|||||||||||||||||
上一篇: text-align-last属性 | 下一篇: text-shadow 文本阴影 |