Question

我有一个datalist（恰好是primefaces，但我看起来与任何datalist都有同样的问题）。在这个页面的一个例子中，datalist有很多成员，大约100个。我不需要显示所有这些内容。我想强迫一小部分进入Overflow Land并使用CSS＆＃34; text-overflow：省略号;＆＃34;向用户表明他们在那里。我尝试了各种max-width，max-height类型的属性。没有任何效果。

FTR - 我们使用的是JSF 2.2 / Primefaces 6.0 / JPA 2

我可以使用限制resultList的查询来备份列表，但我宁愿在前端处理此问题。这是最好的方式吗？有可能吗？

我的代码是：

 <p:dataList value="#{off.v4Segments(officeId)}" var="_seg" >
   <h:outputText value="#{_seg.segment}" />
 </p:dataList>

它呈现如下：

<div class="ui-datalist ui-widget office-segments" id="j_idt70:j_idt91:j_idt111">
  <div class="ui-datalist-content ui-widget-content" id="j_idt70:j_idt91:j_idt111_content">
    <ul class="ui-datalist-data" id="j_idt70:j_idt91:j_idt111_list">
      <li class="ui-datalist-item"><span class="off-seg">0G16</span></li>
      <li class="ui-datalist-item"><span class="off-seg">0G18</span></li>
      <li class="ui-datalist-item"><span class="off-seg">0G88</span>
      ....
    </ul>
  </div>
</div

Answer 1

尝试将以下css属性添加到父div：

max-height: 100px;
overflow-y:hidden;

如果你的元素大于100px。它不会显示。

看看这个： http://jsfiddle.net/ns0pukh9/

如何强制datalist项目溢出？

1 个答案: