0

I've this "table" build using flex and I need to truncate text of the first column when it has not enough space. So it should be always in a single line

.parent {
  display: flex;
  border: 1px solid black;
  gap: 10px;
}

.first-column {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.second-column {
  border: 1px solid steelblue;
}

.third-column {
  border: 1px solid green;
}

.value-cell {
  width: 50px;
  text-align: right;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="parent">
  <div class="first-column">
    <div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="truncate">Ut enim ad minim veniam</div>
    <div class="truncate">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
  </div>
  
  <div class="second-column">
    <div class="value-cell">10</div>
    <div class="value-cell">20</div>
    <div class="value-cell">99</div>
  </div>
  
  <div class="third-column">
    <div class="value-cell">55</div>
    <div class="value-cell">45</div>
    <div class="value-cell">38</div>
  </div>
</div>

So I would like something like this:

enter image description here

but my code produces this:

enter image description here

I don't know the dimensions of the first-column because it should be grows with the container... How can I fix?

whitecircle
  • 237
  • 9
  • 34

1 Answers1

-2

Try to set a max-width in the truncate class.

https://www.w3schools.com/cssref/pr_dim_max-width.php

HWS-SLS
  • 17
  • 4