@EncyKe
2017-03-02T09:24:22.000000Z
字数 2098
阅读 1031
#手册
/**
* @description 按规定行数切除、省略文本;不够行数则高度收缩
* @param {Number} $line-limit: 1 - 规定行数
*/
@mixin line-clamp($line-limit: 1) {
overflow: hidden;
text-overflow: ellipsis;
@if $line-limit == 1 {
white-space: nowrap;
line-height: 1;
} @else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line-limit;
}
}
/**
* @description 按规定行数切除、省略文本;不够行数则高度不收缩
* @param {Number=1} $line-limit - 规定行数
* @param {Number=1.2} $line-height - 行高
* @param {String=16px} $font-size - 字号
*
* @see http://codepen.io/siiron/pen/jfBhy/
* @deprecated
*/
@mixin line-clamp($line-limit: 1, $line-height: 1.2, $font-size: 16px) {
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
position: relative;
font-size: $font-size;
line-height: $line-height;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 !important;
-webkit-line-clamp: $line-limit;
height: calc(#{$font-size} * #{$line-height} * #{$line-limit});
}
html {
/* 保证 body 百分比设置有效 */
height: 100%;
}
body {
/* 定义 footer 定位基准。如果不设置,footer 会以 html 为基准,而 html 的高度为 100%,导致 footer 的位置不随文档高度伸缩 */
position: relative;
/* 保证页面高度很小时 footer 也能固定在底部 */
min-height: 100%;
}
.footer-helper {
/* 保证页面高度超过 body 最小高度时,主内容区域不和 footer 区域重叠 */
padding-bottom: $footer-height;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: $footer-height;
width: 100%;
}
/* 禁止滚动条 */
body.no-scroll {
overflow-x: hidden;
overflow-y: hidden;
}
/* 启用滚动条 */
body.allow-scroll {
overflow-x: auto;
overflow-y: auto;
}
<input type="text" x-webkit-speech="">
.container {
background-image:
linear-gradient(
-360deg,
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0)
),
url("https://www.google.com/images/srpr/logo3w.png");
}
.container {
background-image:
linear-gradient(
-360deg,
rgba(0, 0, 0, .3),
rgba(0, 0, 0, .3)
),
url("https://www.google.com/images/srpr/logo3w.png");
}
.wrapper {
position: relative;
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 10;
}
}