html - 使用 nowrap 消除多余的高度

Question

我遇到的问题是，当我有一个太大的文本时，即使我放置 CSS 属性使其带有省略号，容器 div 的高度也会被修改。我需要这个容器 div 不能修改它的高度，但我不能给它一个最大高度，因为大小可以是动态的，具体取决于参数。

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

正如您在示例中看到的那样，“标题”中断了几行，我需要避免这种情况

标签： htmlcss