How to force datalist items into overflow?

Question

I have a datalist (happens to be primefaces, but I have the same problem with any datalist it seems). In one instance of this page, the datalist has a LOT of members, 100 or so. I don't need to display all of them. I'd like to force all but a handful into Overflow Land and use CSS "text-overflow: ellipsis;" to indicate to the user they are there. I've tried a variety of max-width, max-height type of attributes. Nothing has worked.

FTR - we are on JSF 2.2/Primefaces 6.0/JPA 2

I could back the list up with a query that limits the resultList, but I'd rather handle this on the front end. Is that the best way? Is it possible?

My code is this:

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

It renders like this:

<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

Try to add to your parent div the following css properties:

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

In case you have a bigger element than 100px. It won't be shown.

Take a look at this: http://jsfiddle.net/ns0pukh9/