手册：前端不完全 hack 工具小集：HTML & CSS 篇

#手册

1. line-clamp 的 SASS 函数

/**
 * @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});
}

2. footer 固定底部

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%;
}

3. 禁止/启用 body 滚动

• 一般用于 modal 弹窗激活/隐藏时同步增删相应类名；
• 弹窗弹出时我们希望用户注意力在弹窗内容上，不被其它干扰，此时给 body 赋予 no-scroll 类名；

/* 禁止滚动条 */
body.no-scroll {
  overflow-x: hidden;
  overflow-y: hidden;
}
/* 启用滚动条 */
body.allow-scroll {
  overflow-x: auto;
  overflow-y: auto;
}

4. 语音输入按钮（chrome 专有）

<input type="text" x-webkit-speech="">

5. 图片蒙层实现

5.1. 图片为 CSS 背景：CSS3 渐变图片背景

.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");
}

5.2. 图片为 img 标签

• HTML 结构：.wrapper > (img + .mask)

.wrapper {
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 10;
  }
}