如何在 Flex 元素内使用省略号

Question

首先有一个固定大小的div（青色）。里面有两个div。一种是弹性的（粉色），另一种是固定尺寸的（灰色）。两个具有长文本的元素位于 flex 元素中。如果文字很长，我希望粉色和灰色适合青色。

我该怎么做？ codepen 在这里。

.parent {
  background-color: cyan;
  width: 500px;
  height: 500px;
  color: red:;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.flex {
  flex: 1 1 auto;
  background-color: pink;
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.fixed {
  width: 50px;
  background-color: gray;
  height: 100%;
  flex: 0 0 auto;
}

.long-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  max-width: 50%;
}

<div class="parent">
  <div class="flex">
    <div class="long-text">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem qui, doloremque perferendis ducimus tempora facere, est, quisquam tenetur veritatis at earum eveniet minima numquam repellendus dolorum enim quos cupiditate quaerat?
    </div>
    <div class="long-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem qui, doloremque perferendis ducimus tempora facere, est, quisquam tenetur veritatis at earum eveniet minima numquam repellendus dolorum enim quos cupiditate quaerat?</div>
  </div>
  <div class="fixed"></div>
</div>

Answer 1

附图是你想要的吗？

如果是，请尝试这个CSS代码。

.parent {
  background-color: cyan;
  width: 500px;
  height: 500px;
  color: red;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.flex {
  flex: 1 1 auto;
  background-color: pink;
  display: flex;
  flex-direction: row;
  max-width: calc(100% - 50px);
}

.fixed {
  width: 50px;
  background-color: gray;
  height: 100%;
  flex: 0 0 auto;
}

.long-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  max-width: 100%;
}