Eliminate excess height with nowrap

Question

The problem I have is that when I have a text that is too big, even if I put the CSS properties so that it comes out with an ellipsis, the height of the container div is modified. I need this container div to not be able to modify its height, but I am not allowed to give it a max-height, since the size can be dynamic depending on a parameter.

.container {
  display: flex;
  border: 1px solid black;
}

.long-text {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

<div class="container">
  <div>
Title for value too long:
  </div>
  <div class="long-text">
  Value too looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
  </div>
</div>

As you can see in the example, the "title" breaks on several lines and I need to avoid this

Try with `white-space: nowrap` on the title. – arieljuod Jul 06 '20 at 12:06 — arieljuod, Jul 06 '20 at 12:06
flex-shrink:0 to the first div – Temani Afif Jul 06 '20 at 12:13 — Temani Afif, Jul 06 '20 at 12:13

Eliminate excess height with nowrap

0 Answers0