142.關於flex佈局與省略號不顯示的問題

阿新 • • 發佈：2020-12-05

關於flex佈局下，css省略號不顯示的問題主要有兩種場景

場景一、直接在flex佈局的元素裡

html

<div class="flex-wrap">
  我們日常工作中，接觸到的主要 API，幾乎都是由今天所講解的這些物件提供的。理解這些物件的性質，我們才能真正理解我們使用的 API 的一些特性。JavaScript 中的物件分類.
  JavaScript 宿主物件千奇百怪，但是前端最熟悉的無疑是瀏覽器環境中的宿主了。在瀏覽器環境中，我們都知道全域性物件是 window，window 上又有很多屬性，如 document。實際上，這個全域性物件 window 上的屬性，一部分來自 JavaScript 語言，一部分來自瀏覽器環境。
</div>

css

* {
  margin: 0;
  padding: 0;
}
.flex-wrap {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: #089e8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

解決方案，直接flex的元素再套一層結構。（簡單粗暴，主要是我實在沒有找到其他方法）
html

<div class="flex-wrap">
  <div class="inner">
    我們日常工作中，接觸到的主要 API，幾乎都是由今天所講解的這些物件提供的。理解這些物件的性質，我們才能真正理解我們使用的 API 的一些特性。JavaScript 中的物件分類.
    JavaScript 宿主物件千奇百怪，但是前端最熟悉的無疑是瀏覽器環境中的宿主了。在瀏覽器環境中，我們都知道全域性物件是 window，window 上又有很多屬性，如 document。實際上，這個全域性物件 window 上的屬性，一部分來自 JavaScript 語言，一部分來自瀏覽器環境。  
  </div>
</div>

css

* {
  margin: 0;
  padding: 0;
}
.flex-wrap {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: #089e8a;
}
.inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

場景二、在flex的子元素裡的子元素

在開發中經常會有這樣的場景，左邊一個按鈕固定寬度，右邊的內容自適應。

——————————————————————————————
|      |                     |
| left |  right              |
|      |                     |
——————————————————————————————

問題程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .flex-wrap {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: #089e8a;
  }
  .left {
    flex: 0 0 60px;
    background-color: #f7f1ee;
  }
  .right {
    flex: 1;
  }
  .right-son {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
</head>
<body>
  <div class="flex-wrap">
    <div class="left"></div>
    <div class="right">
      <div class="right-son">
        我們在前面說過，固有物件是由標準規定，隨著 JavaScript 執行時建立而自動建立的物件例項。固有物件在任何 JavaScript 程式碼執行前就已經被創建出來了，它們通常扮演者類似基礎庫的角色。我們前面提到的“類”其實就是固有物件的一種。
      </div>
    </div>
  </div>
</body>
</html>

這裡主要有問題的不是 right 元素，而是 right 的子元素。
但是我們解決問題的途徑是從 right 元素入手的

解決方案：在 right 類中新增 width:0

完整程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .flex-wrap {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: #089e8a;
  }
  .left {
    flex: 0 0 60px;
    background-color: #f7f1ee;
  }
  .right {
    flex: 1;
    width: 0;
  }
  .right-son {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
</head>
<body>
  <div class="flex-wrap">
    <div class="left"></div>
    <div class="right">
      <div class="right-son">
        我們在前面說過，固有物件是由標準規定，隨著 JavaScript 執行時建立而自動建立的物件例項。固有物件在任何 JavaScript 程式碼執行前就已經被創建出來了，它們通常扮演者類似基礎庫的角色。我們前面提到的“類”其實就是固有物件的一種。
      </div>
    </div>
  </div>
</body>
</html>