CSS text overflow ellipsis + width in % does not work

Question

Text overflow works only if width is in pixel and does not accept percent. I am having issue with firefox dont know about other browsers.

<div class="items">
    <div class="item">
            <div class="name">Title Long Long Long Long Long 1</div>
            <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
    <div class="item">
        <div class="name">Title Long Long Long Long Long 2 </div>
        <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
</div>

.items {
   width:30%;
}
.item {
  display:table;
}
.item .name ,.item .desc  {
  display:table-cell;
        white-space: nowrap;
    text-overflow: ellipsis;    
    overflow: hidden;   
}
.item .name {
    width:20%;
}
.item .desc {
    width:80%;
}

fiddle link here: Demo

Inorder to make it work I need to set maxwidth. This will impact the elements which are responsive

.item .desc {
    max-width: 105px;
    width: 80%;
 }

Answer 1

Main problem here is that you are formatting your elements with table(-*) display values.

Tables have their own layout algorithm, and one basic component of that is, “make stuff as wide as needed to display the content”.

If you don’t want that, and want the widths that you specified to be honored no matter what instead, you need to use table-layout:fixed. On top of that you will need to specify width:100% for your table elements here, otherwise they will still flow out of the limited width container.

.items {
   width:30%;
}
.item {
  display:table;
  table-layout:fixed; /* added, so that width specifications will be honored */
  width:100%; /* needed so that these tables honor width of parent element */
}
.item .name ,.item .desc  {
  display:table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;    
  overflow: hidden;   
}
.item .name {
  width:20%;
}
.item .desc {
  width:80%;
}

<div class="items">
    <div class="item">
            <div class="name">Title Long Long Long Long Long 1</div>
            <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
    <div class="item">
        <div class="name">Title Long Long Long Long Long 2 </div>
        <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
</div>

http://jsfiddle.net/bd3qxrpL/2/