142.关于flex布局与省略号不显示的问题

关于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>
posted @ 2020-12-05 20:34  海客无心x  阅读(640)  评论(0)  编辑  收藏  举报