Ellispsis is not working despite everything i try

Question

Ellipsis is not working and i'm loosing it. Here is the CSS piece:

.inbox-widget-namecell {
    font-size: 16px;
    display: block;
    position: absolute;
    left: 22px;
    top: 17px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 60%;
}

Here is the HTML piece:

 <div>
    <listbox model="@load(vm.inboxListModel)" zclass="inbox-widget-listbox" if="${vm.isEmpty}">
       <template name="model" var="item">
           <listitem zclass="inbox-widget-listitem" onClick="@command('handleClickEvent', currentItem=item)" >
               <listcell label="@load(item.folderNameCell)" zclass="inbox-widget-namecell"/>
               <listcell label="@load(item.senderEmailCell)" zclass="inbox-widget-emailcell"/>
               <listcell label="@load(item.modificationDateCell)" zclass="inbox-widget-datecell"/>
           </listitem>
       </template>
    </listbox>
 </div>

actual HTML

I have already tried:

inline-block instead of block
max-width instead of width
pixels instead of percent

Any suggestions ? Thank you.

That's not standard HTML. What's the actual HTML/DOM produced by this? — deceze, Jan 14 '22 at 10:37
Sure, whatever that is… *What's the actual DOM produced by this?* — deceze, Jan 14 '22 at 10:40
Can you create an example of the actual HTML + CSS produced, demonstrating the issue somewhere like jsfiddle.net? — trashr0x, Jan 14 '22 at 12:22
@trashr0x StackOverflow has an integrated Snippet functionality for this purpose…! — deceze, Jan 14 '22 at 12:23

score 0 · Answer 1 · answered Jan 14 '22 at 14:57

0

Replacing "zclass" with "class" solved the ellipsis problem. (but caused other ones)

answered Jan 14 '22 at 14:57

GetsugaTensho

29
7

Ellispsis is not working despite everything i try

1 Answers1