让span / font填充尽可能多的地方，而不会溢出

Question

我有一个header-div占据了视口的一小部分，宽度为100％，高度约为20％。 在这个header-div中，我有一个带有我网站标题的跨度：我希望这个跨度占用尽可能多的空间，而不会溢出或分成多行。 基本上：如果它可以扩展到父容器的100％高度（包括边距/填充）而宽度不比父容器大，那么让它按比例放大。否则，让它扩展到父级宽度的100％，以及相应的高度。 最理想的情况是，如果出现第二种情况，父容器也应缩小到跨度的高度。

一个小涂料示例：

正如您所看到的，在第一个示例（可能是正常的计算机屏幕）中，文本尽可能地扩展而不会不成比例：它占用父容器的所有高度，以及相应的宽度量

第二个例子，很可能是移动电话，显示如果文本扩展到父级宽度的100％，它会溢出：因此，宽度将设置为100％而不是高度，高度将适应。

最后一个例子是第二个的改进版本：由于字体不会占用父容器的所有高度，因此父容器的最佳位置可以使其高度适应子容器。

另外：在电脑屏幕等大屏幕上，必须强制应用第一个例子，否则文字会变得太大。

我在stackoverflow上环顾四周，找不到这个问题的确切答案。感谢帮助，谢谢！