htmlcssflexboxellipsis

How to use ellipsis inside flex elements

First there is a fixed-size div(cyan). Two div are in it. One is flex(pink), other is fixed size(gray). Two elements with long text are in the flex element. If text is long, I want pink and gray to fits inside cyan.

How can I do this? codepen is here.

.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>

Solution

  • Is the attached picture what you want?

    if yes please try this css code.

    .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%;
}