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>
