css 處理文字溢出省略相關(guān)的樣式

01.單行固定寬度溢出省略

  .text {
    width: 100px;
    white-space:nowrap;       /* 使文本不可換行 */
    overflow:hidden;          /* 隱藏溢出部分 */ 
    text-overflow:ellipsis;   /* 顯示省略符號來代表被隱藏的文本 */
  }

使用scss mixin進(jìn)行封裝

// 單行文本省略  需要確定容器寬度
@mixin single-line-ellipsis($width) {
  width: $width;
  white-space: nowrap; /* 使文本不可換行 */
  overflow: hidden; /* 隱藏溢出部分 */
  text-overflow: ellipsis; /* 顯示省略符號來代表被隱藏的文本 */
}

02.多行固定寬度溢出省略

``-webkit-line-clamp: 2; ` 關(guān)鍵是line-clamp屬性, 從前綴可以看出是webkit內(nèi)核的瀏覽器支持的樣式.

ie之類的瀏覽器是不支持的.

 .text {
    width: 100px;
    word-wrap:break-word;         /* 內(nèi)容存在英語或數(shù)字時強(qiáng)制換行 */
    overflow: hidden;             /* 隱藏溢出部分 */
    text-overflow: ellipsis;      /* 顯示省略符號來代表被隱藏的文本 */
    display: -webkit-box;         /* 將對象作為彈性伸縮盒子模型顯示 */
    -webkit-box-orient: vertical; /* 設(shè)置盒子內(nèi)排列順序?yàn)榭v向 */
    -webkit-line-clamp: 2;        /* 限制塊元素顯示的文本的行數(shù) */
  }

使用scss mixin封裝

// 多行文本固定省略，需要確定行數(shù)和寬度
@mixin multi-line-ellipsis($width, $lineCount) {
  width: $width;
  word-wrap: break-word; /* 內(nèi)容存在英語或數(shù)字時強(qiáng)制換行 */
  overflow: hidden; /* 隱藏溢出部分 */
  text-overflow: ellipsis; /* 顯示省略符號來代表被隱藏的文本 */
  display: -webkit-box; /* 將對象作為彈性伸縮盒子模型顯示 */
  -webkit-box-orient: vertical; /* 設(shè)置盒子內(nèi)排列順序?yàn)榭v向 */
  -webkit-line-clamp: $lineCount; /* 限制塊元素顯示的文本的行數(shù) */
}

03.不定寬溢出省略

很多時候我們都是用flex布局，比如左邊是flex:1,右邊是固定寬度，這樣左邊就是不定寬的

這種情況，首先我們想到的是，用clac計(jì)算一個寬度，但是其實(shí)不是很合適。比如這樣calc(100vw -200px),感覺還會有很多問題

我在網(wǎng)上找到一個方法，就是把flex:1的容器，添加min-width:0,這樣就能生效了。