css骚操作

1、文本溢出隐藏显示省略号

一行

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

两行

.webkit-ellipsis {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

2、文本文字两端对齐

PC：

注意文本要加宽度，否则无效

.justify {
  text-align-last: justify;
  -moz-text-align-last: justify ;  //兼容firefox
  text-align: justify;
}

移动端：

由于ios不支持text-align-last: justify;属性

所以加了一个伪类去断行，但是下方会出现一个空行，用限制高度，加上overflow: hidden;处理

.justify{
  text-align-last: justify;/* ie9*/
  -moz-text-align-last: justify ;  //兼容firefox
  -webkit-text-align-last: justify;/*chrome 20+*/
  text-align: justify;
  height: 40/@base;
  overflow: hidden;
  &:after {
    content: "";
    width: 100%;
    display:inline-block;
  }
}

3、清浮动

display: block;
clear: both;

4、margin、text-indent（长与padding连用）

margin负值会让盒子反方向移动

text-indent: -25px;
padding-left: 25px;
通常用于图片跟文字在一起时，文字换行会和第一行对齐

5、设置文字环绕的效果

<div class="text">
    <img src="01.ipg" alt="">
    浮动文本浮动文本浮动文本浮动文本浮动文本浮动文本浮动文本浮动文本
</div>

img {
    float: left;
}

实现原理：元素设置浮动之后，为半脱离文档流，盒子脱离了文档流，但是盒子内容并没有脱离文档流，所以在图片设置浮动之后，文字会环绕图片

6、想让一个文本一直在一排文字的右上角

<div class="text">
    定位的练习demo<span>热卖</span>
</div>

.text {
    display: inline-block;
}
.text span {
    position: absolute;
    margin-top: -16px;
}

原理：设置绝对定位没有设置定位值的时候，元素脱离文档流，但是元素还是在原来的位置，再通过负margin值实现一直定位在右上角的效果

7、使用border画一个三角形（倒三角形）

width: 1px;
border-top: 11px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;

8、改变输入框提示文字样式，解决浏览器自动填充内容背景色问题

//placeholder提示文本的样式
  input, textarea {
    &::-webkit-input-placeholder {
      color: @tip-color;
    }
    &:-moz-placeholder {
      color: @tip-color;
    }
    &::-moz-placeholder {
      color: @tip-color;
    }
    &:-ms-input-placeholder {
      color: @tip-color;
    }
  }
  // input 自动填充背景色
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #F8F8F8 inset;
  }

9、移动端1px线绘制

利用css3中的根据不同倍率的屏幕缩放而实现

// 1px边框
// 横向
.borderX1px {
  &:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
// 竖向
.borderY1px {
  &:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .borderX1px:after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .borderY1px:after {
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .borderX1px:after {
    -webkit-transform: scaleY(0.33);
    transform: scaleY(0.33);
  }
  .borderY1px:after {
    -webkit-transform: scaleX(0.33);
    transform: scaleX(0.33);
  }
}