1、文本溢出隱藏顯示省略號(hào)

一行

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、文本文字兩端對(duì)齊

PC：

注意文本要加寬度，否則無(wú)效

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

移動(dòng)端：

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

所以加了一個(gè)偽類去斷行，但是下方會(huì)出現(xiàn)一個(gè)空行穆刻，用限制高度，加上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杠步、清浮動(dòng)

display: block;
clear: both;

4氢伟、margin、text-indent（長(zhǎng)與padding連用）

margin負(fù)值會(huì)讓盒子反方向移動(dòng)

text-indent: -25px;
padding-left: 25px;
通常用于圖片跟文字在一起時(shí)篮愉，文字換行會(huì)和第一行對(duì)齊

5腐芍、設(shè)置文字環(huán)繞的效果

<div class="text">
    <img src="01.ipg" alt="">
    浮動(dòng)文本浮動(dòng)文本浮動(dòng)文本浮動(dòng)文本浮動(dòng)文本浮動(dòng)文本浮動(dòng)文本浮動(dòng)文本
</div>

img {
    float: left;
}

實(shí)現(xiàn)原理：元素設(shè)置浮動(dòng)之后差导，為半脫離文檔流试躏，盒子脫離了文檔流，但是盒子內(nèi)容并沒(méi)有脫離文檔流设褐，所以在圖片設(shè)置浮動(dòng)之后颠蕴，文字會(huì)環(huán)繞圖片

6、想讓一個(gè)文本一直在一排文字的右上角

<div class="text">
    定位的練習(xí)demo<span>熱賣</span>
</div>

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

原理：設(shè)置絕對(duì)定位沒(méi)有設(shè)置定位值的時(shí)候助析，元素脫離文檔流犀被，但是元素還是在原來(lái)的位置，再通過(guò)負(fù)margin值實(shí)現(xiàn)一直定位在右上角的效果

7外冀、使用border畫一個(gè)三角形（倒三角形）

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

8寡键、改變輸入框提示文字樣式，解決瀏覽器自動(dòng)填充內(nèi)容背景色問(wèn)題

//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 自動(dòng)填充背景色
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #F8F8F8 inset;
  }

9雪隧、移動(dòng)端1px線繪制

利用css3中的根據(jù)不同倍率的屏幕縮放而實(shí)現(xiàn)

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