溢出显示省略号css代码

你的名字 2021-01-29 08:52 749阅读 0赞

### 溢出显示省略号 ###

参过参数可以只是单/多行.

/**
    * 溢出省略号
    * @param {Number} 行数
    */
    @mixin ellipsis($rowCount: 1) {
      @if $rowCount <=1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      } @else {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $rowCount;
        -webkit-box-orient: vertical;
      }
    }

### 真.1px边框 ###

移动端由于像素密度比的问题, 实际的1px边框看起来比较粗, 如果想要更"细"可以使用下面的代码. **不同像素密度比的设备都可以兼容(pc/手机), 还支持任意数量圆角**.

/**
    * 真.1px边框
    * {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;
    * {Color} 边框的颜色, 默认#ccc;
    * {List} 4个圆角半径, 默认0;
    * {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;
    */
    @mixin thinBorder(
      $directionMaps: bottom,
      $color: #ccc,
      $radius: (
        0,
        0,
        0,
        0
      ),
      $position: after
    ) {
      // 是否只有一个方向
      $isOnlyOneDir: string==type-of($directionMaps);
    
      @if ($isOnlyOneDir) {
        $directionMaps: ($directionMaps);
      }
    
      @each $directionMap in $directionMaps {
        border-#{$directionMap}: 1px solid $color;
      }
    
      // 判断圆角是list还是number
      @if (list==type-of($radius)) {
        border-radius: nth($radius, 1)
          nth($radius, 2)
          nth($radius, 3)
          nth($radius, 4);
      } @else {
        border-radius: $radius;
      }
    
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
          position: relative;
    
          // 删除1像素密度比下的边框
          @each $directionMap in $directionMaps {
            border-#{$directionMap}: none;
          }
        }
    
        &:#{$position} {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 200%;
          height: 200%;
          transform: scale(0.5);
          box-sizing: border-box;
          padding: 1px;
          transform-origin: 0 0;
          pointer-events: none;
          border: 0 solid $color;
    
          @each $directionMap in $directionMaps {
            border-#{$directionMap}-width: 1px;
          }
    
          // 判断圆角是list还是number
          @if (list==type-of($radius)) {
            border-radius: nth($radius, 1) *
              2
              nth($radius, 2) *
              2
              nth($radius, 3) *
              2
              nth($radius, 4) *
              2;
          } @else {
            border-radius: $radius * 2;
          }
        }
      }
    
      @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        &:#{$position} {
          // 判断圆角是list还是number
          @if (list==type-of($radius)) {
            border-radius: nth($radius, 1) *
              3
              nth($radius, 2) *
              3
              nth($radius, 3) *
              3
              nth($radius, 4) *
              3;
          } @else {
            border-radius: $radius * 3;
          }
    
          width: 300%;
          height: 300%;
          transform: scale(0.3333);
        }
      }
    }

### 等边三角形 ###

常用来做下拉菜单的方向指示, 如果你做的页面就是个简单的活动页, 引入"饿了么"一类的ui就有些大材小用了, 借助"三角形"你可以自己做一个简单的.

/**
    * 等边三角形
    * @param {String} 尺寸
    * @param {Color} 颜色
    * @param {String} 方向
    */
    @mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
      width: 0;
      height: 0;
      border-style: solid;
    
      @if (bottom==$dir) {
        border-width: $size $size 0 $size;
        border-color: $color transparent transparent transparent;
      } @else if (top==$dir) {
        border-width: 0 $size $size $size;
        border-color: transparent transparent $color transparent;
      } @else if (right==$dir) {
        border-width: $size 0 $size $size;
        border-color: transparent transparent transparent $color;
      } @else if (left==$dir) {
        border-width: $size $size $size 0;
        border-color: transparent $color transparent transparent;
      }
    }

### loading ###

![undefined][]

这是一个"半圆边框"旋转的loading, 你可以根据业务需求自己指定圆的半径.

@mixin loading-half-circle($width: 1em) {
      display: inline-block;
      height: $width;
      width: $width;
      border-radius: $width;
      border-style: solid;
      border-width: $width/10;
      border-color: transparent currentColor transparent transparent;
      animation: rotate 0.6s linear infinite;
      vertical-align: middle;
    }

### 棋盘 ###

如果你做一些界面生成器工具(类易企秀)你会用到.

![1.png][]

/**
    * 棋盘背景
    * @param {Color} 背景色
    */
    @mixin bgChessboard($color: #aaa) {
      background-image: linear-gradient(
          45deg,
          $color 25%,
          transparent 25%,
          transparent 75%,
          $color 75%,
          $color
        ),
        linear-gradient(
          45deg,
          $color 26%,
          transparent 26%,
          transparent 74%,
          $color 74%,
          $color
        );
      background-size: 10vw 10vw;
      background-position: 0 0, 5vw 5vw;
    }

[undefined]: /images/1611910314041.gif
[1.png]: /images/1611910293844.jpg