css-useful-with-view.css

/** 设置input的placeholder样式 兼容性好法 */
@mixin input-placeholder($color: var(--black)) {
  &::-webkit-input-placeholder {
    color: $color;
  }
  &:-moz-placeholder {/* Firefox 18- */
    color: $color;
  }
  &::-moz-placeholder {/* Firefox 19+ */
   color: $color;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
}

@include input-placeholder(#fff);

/* -------------------------------------------------------- */

/** 设置属性mixin */
// https://www.w3cplus.com/preprocessor/sass-basic-mixins-nesting-placeholders-extend.html
@mixin fit-content($property) {
  // #{$property}: -webkit-fit-content;
  // #{$property}: -moz-fit-content;
  #{$property}: -o-fit-content;
  #{$property}: -ms-fit-content;
  #{$property}: fit-content;
}

@include fit-content(max-width);

/* -------------------------------------------------------- */

// https://sass-guidelin.es/zh/
// 建议使用 [autoprefixer](https://github.com/postcss/autoprefixer)
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }

  #{$property}: $value;
}

@include prefix(transform, rotate(90deg), ('webkit', 'ms'));

/* -------------------------------------------------------- */

/** 超出单行内容省略号显示 */
.text {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------- */

/** ref: http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/ */
/** title全显示、可换行 */
.title {
  word-break: keep-all; /* 决定单词内该怎么换行 */
  word-wrap: break-word; /* 决定句尾放不下单词时，单词是否换行 */
  white-space: pre-wrap; /* 解决多空格压缩显示问题 */
}