我来晚了，但如果我正确地理解了您的需求，完全可以使用内联HTML样式或CSS实现您想要的功能，但可能不是您首选的方式。我提供两个可能的解决方案。
正如您和其他人指出的那样，需要一些基本属性值是无法访问的。然而，它们显然对浏览器是可用的，因为它必须进行计算以使块足够大以适应内容等。
只需要少量CSS。
这里提供的HTML总长度相对较长，但这仅因为它包括两个解决方案和九个进度状态文本示例。任何解决方案都只需要三个DOM元素。
我认为我已经满足了您的请求，两种解决方案的方法中的技巧是以一种可以隐式或显式访问风格属性的方式让浏览器进行计算的结果。
在这种情况下，它是包含两行文本的块的高度。
所以：
- 创建两行文本，其中包含“ <br> ”
- 将其放入一个块中，该块在此处为两行高
- 将该块放入容器块中
- 容器块在此处为两行高，即其最小高度已被隐式设置为两行
- 在容器内放置另一个块，即进度状态块
第一种解决方案是“内联”进度状态块。
第二种解决方案是“定位”进度状态块。
在这两种解决方案中，进度状态块可以根据需要在一行或两行文本之间跳转，而不会影响容器外的任何内容。
这两种解决方案中的第一种“内联”允许三行或更多行的文本扩展容器。这是因为容器的计算高度取决于其内容的流动，最终取决于进度状态文本，因此无法将最大高度或高度设置为值，因为当容器的高度可访问时，浏览器已经从初始的两行更改了计算高度。如果偶尔出现额外的流量不是问题，则一切正常。但是，您无法修剪否则会溢出的内容，因为所需高度不可访问。
第一种解决方案使用了三个CSS类，后缀为“Inline”。
第二种解决方案是位置(Position)，通过使用绝对定位将进度状态块的内容流与其容器分离，使容器高度可访问。这意味着进度状态块的内容不再影响其容器(即父级)的大小。因此，进度状态块的最大高度或高度可以设置为其父级的高度，一旦分离，就不会重新计算(在这种情况下)，而在这种情况下是两行。但是，溢出必须被隐藏，否则它将跨越容器的边缘和其他任何阻挡它的东西。请注意，背景受高度设置的限制，不会跟随溢出文本。
第二种解决方案使用了三个CSS类，后缀为“Position”。
任何一种解决方案都可以轻松调整到超过两行；只需为每个额外的行添加“<br> ”即可。
您还可以像位置(Position)解决方案一样，向内联(Inline)解决方案添加“visibility: hidden;”，以防止屏幕阅读器被无关紧要的内容分散注意力。
为了在位置解决方案中使用背景，同时填充一个文本行的容器，请将 CSS 类中的 max-height 更改为 height。对于内联解决方案，请将进度状态块中的背景移动到容器块 CSS 类中。
我已经在 Windows 上的 Chrome 和 Android 上的 Chrome 上尝试了这两种解决方案。这是非常基本的 CSS 和 HTML，所以应该可以普遍适用吧？
.progressStatusContainerInline {
border: 3px solid black;
}
.setHeightTwoLinesInline {
display: inline-block;
width: 0%;
}
.progressStatusInline {
display: inline-block;
background: pink;
width: 100%;
}
.progressStatusContainerPosition {
position: relative;
border: 3px solid black;
}
.setHeightTwoLinesPosition {
visibility: hidden;
}
.progressStatusPosition {
position: absolute;
top: 0px;
left: 0px;
background: pink;
width: 100%;
max-height: 100%;
overflow: hidden;
}
Inline examples with:
<ul>
<li>default line height</li>
<li>single line of text at bottom of status box</li>
<li>too much text expands status box</li>
</ul>
<div style="width: 200px;">
<div class="progressStatusContainerInline">
<div class="setHeightTwoLinesInline"> <br>
</div><div class="progressStatusInline">
Progress status text line going to two lines.
</div>
</div>
<br>
<div class="progressStatusContainerInline">
<div class="setHeightTwoLinesInline"> <br>
</div><div class="progressStatusInline">
Short status text.
</div>
</div>
<br>
<div class="progressStatusContainerInline">
<div class="setHeightTwoLinesInline"> <br>
</div><div class="progressStatusInline">
Much much much much much much longer status text written here.
</div>
</div>
</div>
<br>
Position examples with:
<ul>
<li>line height 3.5</li>
<li>single line of text at top of status box</li>
<li>too much text is truncated</li>
</ul>
<div style="line-height: 3.5; width: 200px;">
<div class="progressStatusContainerPosition">
<div class="setHeightTwoLinesPosition"> <br>
</div><div class="progressStatusPosition">
Progress status text line going to two lines.
</div>
</div>
<br>
<div class="progressStatusContainerPosition">
<div class="setHeightTwoLinesPosition"> <br>
</div><div class="progressStatusPosition">
Short status text.
</div>
</div>
<br>
<div class="progressStatusContainerPosition">
<div class="setHeightTwoLinesPosition"> <br>
</div><div class="progressStatusPosition">
Much much much much much much longer status text written here.
</div>
</div>
</div>
<br>
Position examples with:
<ul>
<li>line height 1.4</li>
<li>single line of text at top of status box</li>
<li>too much text is truncated</li>
</ul>
<div style="line-height: 1.4; width: 200px;">
<div class="progressStatusContainerPosition">
<div class="setHeightTwoLinesPosition"> <br>
</div><div class="progressStatusPosition">
Progress status text line going to two lines.
</div>
</div>
<br>
<div class="progressStatusContainerPosition">
<div class="setHeightTwoLinesPosition"> <br>
</div><div class="progressStatusPosition">
Short status text.
</div>
</div>
<br>
<div class="progressStatusContainerPosition">
<div class="setHeightTwoLinesPosition"> <br>
</div><div class="progressStatusPosition">
Much much much much much much longer status text written here.
</div>
</div>
</div>
