0

I am not able to get the ellipses to work inside a flex box. I have gone over a ton of examples and answers on how to do this but nothing is working. I need to shorten the long text with an ellipses in column 2.

* {
  box-sizing: border-box;
}

.application {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  margin: 10px;
}
.container1,
.container2 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 10px;
  border: 1px solid green;
}
.container2 {
  border: 1px solid purple;
}
.row {
  display: flex;
  width: 100%;
  padding: 5px;
}
.col1 {
  width: 100px;
  background: lightgreen;
}
.col2 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col3 {
  width: 60px;
  background: yellow;
}
<div class="application">
  <div class="container1">
    <div class="row">
      <div class="col1"> </div>
      <div class="col2">This is a short Text</div>
      <div class="col3"></div>
    </div>
    <div class="row">
      <div class="col1"></div>
      <div class="col2">
          Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
      </div>
      <div class="col3"></div>     
    </div>
  </div>
  <div class="container2"></div>
</div>
Elcid_91
  • 1,571
  • 4
  • 24
  • 50

1 Answers1

-1

You need to add a specific width in px.

max-width: value; / width: value;

Either width or max-width works well.

Here is the new code :)

* {
  box-sizing: border-box;
}

.application {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  margin: 10px;
}
.container1,
.container2 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 10px;
  border: 1px solid green;
}
.container2 {
  border: 1px solid purple;
}
.row {
  display: flex;
  width: 100%;
  padding: 5px;
}
.col1 {
  width: 100px;
  background: lightgreen;
}
.col2 {
  flex: 1;
  min-width: 0;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col3 {
  width: 60px;
  background: yellow;
}
<div class="application">
  <div class="container1">
    <div class="row">
      <div class="col1"> </div>
      <div class="col2">This is a short Text</div>
      <div class="col3"></div>
    </div>
    <div class="row">
      <div class="col1"></div>
      <div class="col2">
          Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
      </div>
      <div class="col3"></div>     
    </div>
  </div>
  <div class="container2"></div>
</div>
Yohan_qns
  • 21
  • 6