html - 允许调整大小以忽略最大高度？

Question

我有一些代码，如第一个片段 - 我很好奇是否有一种方法可以使用调整大小并允许它忽略最大高度？

我不只使用高度的原因是我希望 div 适合第一个没有空格的内容。如果您想查看，我将其包含在最后。

基本上，我正在尝试获得看起来像第一个，但功能与第二个类似的东西。

谢谢!

.content {
  max-height: 5em;
	overflow-y: auto;
	resize: vertical;
  white-space: pre-wrap;
 }

<div class="content">One line</div>
<div class="content">Multi
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
line</div>

由于多余的空格，这对我正在尝试做的事情不起作用:

.content {
  height: 5em;
	overflow-y: auto;
	resize: vertical;
  white-space: pre-wrap;
 }

<div class="content">One line</div>
<div class="content">Multi
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
line</div>

响应第一个答案，内容是动态的。我提供了一个动态的例子

rand1 = Math.floor((Math.random() * 10) + 1);
rand2 = Math.floor((Math.random() * 10) + 1);
document.getElementById("1").innerHTML = "Start"
for (var i = 0; i < rand1; i++) {
  document.getElementById("1").innerHTML += ".\n"
}
document.getElementById("2").innerHTML = "Start"
for (var i = 0; i < rand2; i++) {
  document.getElementById("2").innerHTML += ".\n"
}

.content {
  max-height: 5em;
  overflow-y: auto;
  resize: vertical;
  white-space: pre-wrap;
}

<div class="content" id="1"></div>
<div class="content" id="2"></div>

Answer 1

您可以使用纯 CSS 来实现。调整元素大小时，会在 html 元素的样式标记内自动生成高度属性。

如果您创建一个引用该属性的 css 选择器并在“高度”存在的情况下取消最大高度，您将获得所需的效果。

.content {
  max-height: 5em;
  overflow-y: auto;
  resize: vertical;
  white-space: pre-wrap;
 }
.content[style*="height"] {
  max-height: unset; 
}