CSS实现多行文本溢出省略效果和单行文本溢出省略效果
2015-09-16 22:01
741 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .inaline { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; } .intwoline { display:-webkit-box !important; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:4; } </style> </head> <body> <div class="inaline" style="width:200px; height:50px;"> 这里是单行文本溢出的例子这里是单行文本溢出的例子这里是单行文本溢出的例子这里是单行文本溢出的例子这里是单行文本溢出的例子 </div> <div class="intwoline" style="width:300px;"> 这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子 这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子 这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子 这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子 这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子 这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子 </div> </body> </html>
相关文章推荐
- CSS3动画
- css制作三级下拉菜单
- css制作三级下拉菜单2
- CSS基础
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- CSS 基础
- 一个关于CSS选择器“优先级”的新问题
- ListView--QQ联系人样式
- 泡泡同学带你玩转css
- css取消div蹭上的鼠标点击事件
- 去除img图片之间的空隙css样式
- CSS
- HTML&CSS Learning Notes 4
- 13年总结js,css,java xml
- Qt绘图之QGraphicsScene QGraphicsView QGraphicsItem详解
- css3阴影设置发光边框效果
- css3--background属性
- css通配符
- CSS选择器的优先级
- 不错的VS2010扩展——JSEnhancements,让js和css也折叠(转)