使用CSS使<li>元素高度为两行？

Question

我有一组记录，使用表单视图显示，并一页一页地翻页。其中几个字段的长度变化很大，经常导致这些字段换行到第二行。目前在浏览记录时，表单视图的外观会随着这些字段的长度而改变，换行会导致页面高度不断增加和缩小。我不太喜欢页面尺寸的变化，因此希望解决这个问题。

以下是我当前的CSS样式：

.CommitmentInfo
{
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
  text-align: left;
  float:left;
  list-style:none;
}
    .CommitmentInfo li
    {
      width: 300px;
    }
    .CommitmentInfo li.b
    {
      width: 150px;
    }

然后是使用此代码的内容：

<ol class="CommitmentInfo">
  <li><asp:Label runat="server" Text='<%# "<b>Vendor Name:</b>" + 
      Eval("ven_name") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Stock Item:</b>" + 
      Eval("cmt_stock_code") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Item Description:</b>" +
      Eval("inv_description") %>' /></li>
</ol>
<ol class="CommitmentInfo">
  <li><asp:Label runat="server" Text='<%# "<b>Agent Name:</b>" + 
      Eval("cmt_agent") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Sales Rep:</b>" + 
      Eval("slm_name") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Documentation:</b>" +
      GetDocument(Eval("doc_description"), Eval("cmt_document")) %>' /></li>
</ol>
<ol class="CommitmentInfo">                    
  <li class="b"><asp:Label runat="server" Text='<%# "<b>Qty Changed:</b>" + 
      Eval("cmt_changed", "{0:d}") %>' /></li>
  <li class="b"><asp:Label runat="server" Text='<%# "<b>Last Update:</b>" + 
      Eval("cmt_added", "{0:d}") %>' /></li>  
</ol>

有三个列表，每个列表都有三列。需要双行显示的元素是第一列的第一个和第三个元素，以及第二列的第三个元素。我认为解决方案是为这些特定的列表元素应用一个新类，但我还没有找到任何使列表元素具有固定行数的方法。有什么建议吗？

- Ben

---

我不知道你的页面长什么样，但是尝试一下：（1）不要使用固定宽度（至少不要使用像素）和（2）尝试更改特定元素的“行高”？ - Erica Xu

推测一下：并没有像设置表格单元格的colspan一样在LI上设置行数的方法。但是，我们可以自己设计一些解决方案。如果您将LI的高度设置为2em，那么它将取决于您文本的像素大小，这将是两行文本的高度。因此，12px字体的2em将是24px。这并不考虑行高，但是您可以将其计算进去，大约得到2.5em的数字？ - Michael

我建议看一下类似于 height: 2em; 这样的东西。这将把高度设置为两行高。 - Jacob Tomlinson

Erica：列宽的原因是因为我想要布局非常具体（我正在将其从以前的一组表格转换），设置宽度对于三列在表单视图中并排存在而不是第三列换行是必要的。@Michael，最终我采用了你的方法，它完美地解决了问题，谢谢。请将其发布为答案，我会将其标记为正确。 - Ben

好的，它已经运行了，答案在下面发布。=) - Michael

Answer 1

我曾经研究过类似的高度问题，发现将文本放入 div 中，对其设置 max-height 属性，并关闭 overflow，可以解决这个问题。

- user1945782

---

仅仅是为了补充一下 - 有时候获取确切的高度可能会有些棘手，因此如果您要使用并且按照这个倍数工作，我建议使用 px 行高。 - user1945782

Answer 2

一个潜在的解决方案是使用EM作为高度单位，因为EM单位是基于字体大小的。

因此，这里的理论是，如果您有一行文本，字体大小为12像素，那么1em = 12像素。

通过将LI的高度设置为2em，您实际上使高度为24像素，或者说两行高度。 也就是说，这没有考虑行高，如果我们有一个行高为15像素，那么每行额外空间为3像素，总共6个像素，24 + 6 = 30 = 2.5em。

- Michael