css - 行数的最小高度

Posted

技术标签:

【中文标题】css - 行数的最小高度【英文标题】:css - min height by number of lines 【发布时间】:2012-06-24 11:43:41 【问题描述】:

我想我已经知道了这个问题的答案,但我希望也许有人会为此提供一些巧妙的技巧。

我想指定 DIV 的最小高度,但不是基于 px / % 的。 (我知道这听起来很奇怪,但这是出于兼容性原因/响应性)

基本上我希望能够通过行数来指定它。

我有一个 DIVS 网格,但是里面的元素不固定,所以一个元素可以有 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 ??)

编辑我

在cmets之后-

我真正想要的是 FORM 元素、INPUT 或 TEXTAREA 之类的东西,您可以在其中简单地通过行/字符指定高度和宽度!

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

很难相信没有人发明过这样的解决方案,让我们所有人都在为 PX / em / % 计算等而苦苦挣扎..

【问题讨论】:

【参考方案1】:

我通过使用flexboxmin-height 完成了这项工作。

将每个 div 元素放在一个 flexbox 容器中,以使它们具有相同的高度并做出响应(即使用断点、flexbox wrapmin-width 以确保拥有更多超过 3 行文本是低的)。然后为每个内部元素设置min-heightline-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)

【讨论】:

(行数) * (font-size) * (line-height multiplier) + (padding-top) + (padding-bottom)【参考方案2】:

你应该使用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 上设置高度/边距:

编辑:

对于不使用表格的内部相等大小,您有几种解决方案:

Using overflow:hidden on the parent and an extra margin-bottom on children if you only use background.

Using display-table attribute (Method 1)

Or using javascript (Method 3)

【讨论】:

是的,div 将按照它们之间的空间对齐,但不是它们的 OWN 大小.. 但是设置自己的大小没有一个问题,这只是一个CSS规则。你的问题是容器大小,对吧? 哦,好吧,我错过了。那么我的表格是一个不错的选择,它们的宽度会自动调整。请参阅我的编辑以获取另一种解决方案。 +1 的努力 :-) 但这些解决方案对我不起作用。我不能在这里详细说明我的整个标记,但问题实际上是在另一个 div 内部,它一个接一个地嵌套,而整个块就是在网格上传播的东西。实际上,今天使用 . css3 中的列和孤儿/寡妇。再次感谢.. 那么 JS 可以成为你的选择:在你的第一个 div 中检查line-height(或非标准属性),并用它计算你的height【参考方案3】:

您为什么这么反对在 ems 中设置min-height 的想法?如果您在 ems 中设置了 line-height,将其乘以 3 即可得到您想要的高度!

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

Fiddled

更新:将 min-height 设置为三行是徒劳的——它不考虑内容适合可用空间的情况。您可以改用faux columns 使内容在行内看起来具有统一的高度

【讨论】:

感谢您的回答 - 它准确地说明了问题。关心在小提琴中调整输出窗格的大小?? :-) 我假设一个固定宽度的布局。无论如何,当内容适合三行时,您打算做什么?如果您不关心(并且您没有指定此场景的行为),只需将 min-height 设置为 height 并将溢出设置为隐藏。与此同时,我将更新我的答案以使用人造列 @ObmerkKronen:只是为了澄清我上面的评论,你在问题中说 一个元素可以有 3 行,而下一个元素只有 2 或 1 行 这意味着你控制容器宽度,保证内容不超过3行。当您将 jsfiddle 预览的大小调整为更窄时,您将不再遵守该保证 是的。我可以保证最大行数。但不是分钟。那就是问题所在。人造列在我的完整场景中不起作用(阅读其他 cmets) @ObmerkKronen:太好了,这让我提供了一个可行的解决方案。由于min-height 的工作方式,它不关心最小内容大小。【参考方案4】:

我不知道你为什么想要那个..但是你可以根据你要使用的字体的大小来固定 div 类的高度和宽度。 假设您的字体大小为 10px,您将使用 10 px 填充,然后使用高度为 50px 的 div.. 然后在这些 div 中添加 ma​​rgin-bottom ,我认为你很高兴!

【讨论】:

谢谢,我之前有这个解决方案 - 但就像我说的,我想看看它是否可以在没有指定和 px 大小的情况下制作......另外,通过添加一个边距底部,它也将附加到完整的潜水中,而不仅仅是半空的.. 我不认为是否可以像这样为 div 添加高度和宽度。就像我们对 textarea 所做的那样。我希望有一些黑客。需要了解一下。 这正是我的问题:找到一个技巧来指定输入区域的行高! (也许有人应该向 css3 开发团队推荐它:-))

以上是关于css - 行数的最小高度的主要内容,如果未能解决你的问题,请参考以下文章

如何在 UITableview 中创建具有 n 行数的 UITextField

Android:TextView最小行数设置

easyui datagrid 改变列表行数 高度自适应

css IE6のための最小高度,最小宽度,最大高度,最大宽度。

父级具有最小/最大高度时的 CSS 百分比高度

CSS 最大/最小宽度和最大/最小高度