优化实战 第 56 期 - 超简单的 CSS 实用技巧

使用纯 CSS 属性来替代 JS 实现一些视觉效果，相比 JS 而言，CSS 使用起来简单方便，也不需要考虑加载的问题。现今的 CSS 不断的强大，可以代替实现很多之前 JS 实现的功能，且在性能上更胜一筹

文本溢出省略号

• 单行文本溢出

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  

• 多行文本溢出

  .multiple-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* 限制显示文本的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  

  适用于 WebKit 内核的浏览器，且必须要添加前缀

定义列表插入换行符

• 换行符

  在 Unicode 字符里有一个专门代表换行符的 0x000A，在 CSS 中可以写作 '\000A'，或简化为 '\A'

• HTML结构

  <dl>
    <dt>姓名：</dt>
    <dd>adiu</dd>
  
    <dt>邮箱：</dt>
    <dd>adiu@163.com</dd>
    <dd>xiaoming@163.com</dd>
  
    <dt>地址：</dt>
    <dd>浙江省杭州市西湖区</dd>
  </dl>
  

• 风格方案

  dt, dd {
    display: inline;
  }
  dd + dt::before {
    content: '\A';
    white-space: pre;
  }
  dd + dd::before {
    content: '，';
  }
  

  默认情况下，浏览器处理内容时会将换行符与相邻的其他空白符进行合并，可以通过 white-space: pre 保留文本中的空白、换行符

网页灰度转换

• 对图片进行灰度转换

  img {
    filter: grayscale(.95);
  }
  

  不指定任何值时，默认值为 1，表示最大灰度，指定 0 时与原图没有区别

  0 到 1 之间的值会使灰度线性变化

• 对整个页面进行灰度转换

  html {
    filter: grayscale(.95);
  }
  

  避免受绝对定位或固定定位的元素影响，必须加到 html 选择器

• 示例效果

  

  一起学习，加群交流看 沸点