Can't make ellipsis work with display: table-cell

Question

I have a layout which is made with css display: table. It has only two columns. One of these columns contains an ul element. It's li's elements are search result items with a title row and a description row, basically. I want to apply ellipsis on the description row to keep it in just one line, so it's text do not affect the entire column's width if it overflows:

Left is what happens with long texts; Right is how it should be.

Now, when I try to apply the ellipsis stuff(what includes white-space: nowrap) the text mess the column's width, making it fit the text width and the ellipsis doesn't shows up.

.table { display: table; width: 100%; border: 1px solid #f00; margin-bottom: 20px }
.table-row { display: table-row }
.table-cell { display: table-cell; }
.table-cell:first-child { width: 30%; }
.table-cell ul { padding: 0; margin: 0 }
.table-cell ul li { list-style: none; }
.item { border: 1px solid #000; }
.item-desc { 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Table 1 - The issue
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <ul>
        <li>
          <div class="item">
            <div class="item-name">Item 1</div>
            <div class="item-desc">
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-cell">Nothing here</div>
  </div>
</div>

Table 2 - How it should work
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <ul>
        <li>
          <div class="item">
            <div class="item-name">Item 1</div>
            <div class="item-desc">
          Item 1 Item 1 Item 1 Item...
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-cell">Nothing here</div>
  </div>
</div>

Table 1 is the current css I got; Table 2 is how it should be.

The issue seems to be the lack of difinition of the width of the item's divs, which should respect the table-cellcontainer. I don't know how to work on this. How can I improve .item-desc to make ellipsis work and keep the column's original width?

Rules for ellipsis: http://stackoverflow.com/q/33058004/3597276 — Michael Benjamin, Feb 13 '17 at 12:16

score 3 · Accepted Answer · answered Feb 13 '17 at 12:13

Use table-layout: fixed for the table - see demo below:

.table {
  display: table;
  width: 100%;
  border: 1px solid #f00;
  margin-bottom: 20px;
  table-layout: fixed; /* ADDED THIS */
}
.table-row {
  display: table-row
}
.table-cell {
  display: table-cell;
}
.table-cell:first-child {
  width: 30%;
}
.table-cell ul {
  padding: 0;
  margin: 0
}
.table-cell ul li {
  list-style: none;
}
.item {
  border: 1px solid #000;
}
.item-desc {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <ul>
        <li>
          <div class="item">
            <div class="item-name">Item 1</div>
            <div class="item-desc">
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-cell">Nothing here</div>
  </div>
</div>

Can't make ellipsis work with display: table-cell

1 Answers1