CSS - 根据行数设置最小高度

Question

我觉得我已经知道了这个问题的答案，但希望也许有人会有一些巧妙的方法。

我想指定一个DIV的最小高度，但不是以像素/百分比为基础（我知道听起来很奇怪，但这是为了兼容性/响应性）。

基本上，我想能够通过行数来指定它。

我有一个DIV网格，但内部元素不是固定的，因此一个元素可以有3行，而下一个元素只有2行或1行。这会搞乱布局。

基本上，我需要的是这个：

    =====================      =====================      =====================
    Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
    amet, consectetur          amet, consectetur          amet, consectetur
    adipiscing elit.
    =====================      =====================      =====================

    =====================      =====================      =====================
    Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
    amet, consectetur          amet, consectetur 
                               adipiscing elit.
    =====================      =====================      =====================

而不是这个：

=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================
                           =====================      =====================
=====================      Lorem ipsum dolor sit      Lorem ipsum dolor sit
Lorem ipsum dolor sit      amet, consectetur          =====================
amet, consectetur          =====================  
adipiscing elit.             
===================== 

是否可以通过指定“我想要3行”来实现这种排序方式？（而不是像像素、百分比/ em那样）

编辑 I

根据评论 -

我真正想要的是类似于FORM元素，INPUT或TEXTAREA，您可以仅按行数/字符数指定其高度和宽度！

<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>

很难相信没有人发明出这样的解决方案，而让我们所有人都要去努力计算PX / em / %之类的东西。

- Obmerk Kronen

Answer 1

你为什么反对使用em来设置min-height的想法呢？如果你已经使用em来设置line-height，只需要将它乘以三就可以得到你想要的高度了！

div {
    line-height:1.5em;
    min-height:4.5em;
    float:left;
    width:33%;/*close enough*/
}

这里有一个演示。

更新：将min-height设置为三行是徒劳的练习-它不能应对内容不适合可用空间的情况。您可以使用虚拟列来使内容在行内呈现统一的高度。

- Oleg

---

谢谢你的回答 - 它完美地说明了问题。你能调整fiddle中的输出窗格大小吗？ :-) - Obmerk Kronen

我假设使用固定宽度布局。无论如何，如果内容不能适应三行，你打算怎么做？如果你不在意（并且你没有为这种情况指定行为），只需将min-height设置为height，并将overflow设置为hidden。同时，我会更新我的答案，使用伪列。 - Oleg

@ObmerkKronen：仅为澄清我上面的评论，您在问题中说“一个元素可以有3行，而下一个只能有2行或1行”，这意味着您控制容器宽度并且可以保证内容永远不会超过3行。当您将jsfiddle预览调整为更窄时，您不再遵守该保证。 - Oleg

是的。我可以保证最大行数，但无法保证最小行数。这是个问题。在我的完整场景中，虚拟列不起作用（请阅读其他评论）。 - Obmerk Kronen

谢谢，但是：1-它仍然存在相同的堆叠问题。2-我的问题是如何在不使用px /％/ em作为最小高度的情况下完成它。此外，在我的情况和场景中，php端负责最大长度，并且无法使用伪列，因为这些div嵌套在两个其他div之间（更像是“夹在”中间），这两个div形成网格的单个块。 - Obmerk Kronen

Answer 2

我通过使用flexbox和min-height来实现这一点。

将你的每个div元素置于flexbox容器中，以使它们具有相同的高度并对响应进行反应（例如使用断点、flexbox wrap和min-width来确保文字超过3行的概率较低）。然后对于每个内部元素，设置min-height和line-height值，就像@o.v.建议的那样。min-height应该等于font-size*line-height倍数。

我需要内部段落至少有2行高（很可能包含1或2行文本，并且出现超过2行文本的可能性非常低），所以这就是我最终得到的：

HTML

<div class="flex-container">
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>

CSS

div.flex-container {
  display: flex;
}
div.flex-container p {
  font-size: 1em;
  line-height: 1.125; // Default is 1.2, but varies by browser
  min-height: 2.25em; // 2 * 1em * 1.125
                      // (number of lines) * (font-size) * (line-height multiplier)
}

- dignoe

---

（行数）（字体大小）（行高倍数）+（上内边距）+（下内边距） - kpower

Answer 3

你应该使用clearfix hack。

这将允许您在不指定任何高度的情况下对齐您的div。它就像一条分隔线：

=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================      
{clearfix}
=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          =====================
=====================      adipiscing elit.
                           =====================

当然，您仍然可以在每个 div 上设置高度/边距：

编辑：

如果不使用表格进行内部等大小设置，则有几种解决方案：

如果只使用背景，请在父元素上使用overflow:hidden和子元素上使用额外的margin-bottom。

使用display-table属性（方法1）

或使用javascript（方法3）

- zessx

---

是的，div元素将根据它们之间的间距对齐，但不会根据它们自己的大小对齐。 - Obmerk Kronen

哦，好的，我错过了。那么表格是一个不错的选择，它们的宽度将自动调整。请参见我的编辑以获取另一种解决方案。 - zessx

然后JS可以是您的选择：检查您的第一个div中的“line-height”（或非标准属性），并根据其计算您的高度。 - zessx

是的 - 想到了。事实上，我现在正在查看砖石布局。但我仍然认为它应该成为标准的CSS属性 :-) - Obmerk Kronen

只是想告诉你，你的clearfix hack链接现在已经失效了。 - watzon

Answer 4

2023年，是的，你可以使用min-height: 1lh; lh代表行高：1lh表示1行，3lh表示3行

行高根据字体大小而变化

浏览器支持正在增加：https://caniuse.com/?search=lh%20unit 这是一个演示：

.one-line {
  min-height: 1lh;
  background: cyan;
  color: black;
}

.three-lines {
  min-height: 3lh;
  background: blue;
  color: white;
}

.font-size-sm {
  font-size: 16px;
}

.font-size-lg {
  font-size: 32px;
}

<div class="one-line font-size-sm">1 line small font</div>
<div class="three-lines font-size-sm">3 lines small font</div>

<div class="one-line font-size-lg">1 line large font</div>
<div class="three-lines font-size-lg">3 lines large font</div>

- danday74

Answer 5

我不知道为什么你想要那个..但是你可以根据你将要使用的字体大小调整div类的高度和宽度。 如果你的字体大小是10px，你将要使用10px的填充，则使用50px高的div.. 然后给这些div添加一个margin-bottom，我想你就可以了！

- Praveen Puglia

---

谢谢，我之前有这个解决方案 - 但是像我说的那样，我正在尝试看看是否可以在不指定px大小的情况下进行制作...此外，通过添加margin-bottom，它也将被附加到完整的div上，而不仅仅是半空的div。 - Obmerk Kronen

我不认为可以像文本区域一样轻松地为div添加高度和宽度。希望有一些技巧可用。需要找出来。 - Praveen Puglia

这正是我的问题：找到一种像输入区域一样指定行高的方法！（也许有人应该向CSS3开发团队提出建议 :-)） - Obmerk Kronen