css 随笔篇
1.一行文字不折行:
white-space:nowrap
overflow:hidden
text-overflow:ellipsis//超出文字展示为...
2.图片和文字组合不等高的时候设置图片的verital-align:top
3.css sticky-footer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <style> .main-content { position: relative; overflow: hidden; color: #fff; } .clearfix { display: inline-block } .clearfix:after { display: block; content: "."; height: 0; line-height: 0; clear: both; visibility: hidden } .detail { position: fixed; width: 100%; height: 100%; z-index: 100; overflow: auto; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); } .detail-wrapper { width: 100%; min-height: 100%; } .detail-close { position: relative; width: 32px; height: 32px; margin: -64px auto 0 auto; clear: both; font-size: 32px; } .detail-main { /*margin-top: 64px;*/ padding-bottom: 64px; } </style> </head> <body> <div class="main-content"> <div class="detail"> <div class="detail-wrapper clearfix"> <div class="detail-main"> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> </div> </div> <div class="detail-close"> <i>x</i> </div> </div> </div> </body> </html>
多行文字溢出[...]的实现(text-overflow: ellipsis)
对于单行文字, 很简单.
- .oneLine {
- width: 200px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.
- .twoLine {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- }
你只要调整-webkit-line-clamp的值就能实现在第n行[...].
对于其他内核的浏览器就只能用javascript来hack了.
Vimeo的Joe已经实现了这一功能, 可以参考 https://github.com/josephschmitt/Clamp.js 来详细了解.
实现隐藏滚动条
1. ::-webkit-scrollbar{width:0px} 或者 ::-webkit-scrollbar{display:none} 只对webkit 的 有效
2.利用父元素的宽度来覆盖住子元素的滚动条
垂直滚动,用鼠标滚轮滚动 :
<!DOCTYPE html> <html lang="utf-8"> <head> <meta charset="utf-8" /> <style> .parent { height: 80px; width: 100px; overflow: hidden; } .content{ height: 80px; width: 126px; /* 多出26像素是滚动条的位置,会被父容器盖住就看不到了 */ overflow-x: hidden; overflow-y: scroll; } </style> </head> <body> <div class="parent"> <div class="content"> <p>整一长段文章进来看效果</p> </div> </div> </body> </html>
横向滚动:
<!DOCTYPE html> <html lang="utf-8"> <head> <meta charset="utf-8" /> <style> .parent { height: 80px; width: 100px; overflow: hidden; } .content { height: 106px; /* 多出26像素是滚动条的位置,会被父容器盖住就看不到了 */ width: 100px; overflow-x: scroll; overflow-y: hidden; } p { white-space: nowrap; /* 不换行 */ } </style> </head> <body> <div class="parent"> <div class="content"> <p>整一长段文章进来看效果</p> </div> </div> </body> </html>