Невозможно сделать многоточие работы с дисплеем: table-cell

Question

У меня есть макет, который сделан с помощью css display: table. Он имеет только две колонки. Один из этих столбцов содержит элемент ul. Это элементы li - это элементы поиска с заголовком и строкой описания, в основном. Я хочу, чтобы применить многоточие на описание строки, чтобы сохранить его в одну строку, так что текст не влияет на ширину всего столбца, если она переполняется:

Левые, что происходит с длинными текстами; Правильно, как это должно быть.

Теперь, когда я пытаюсь применить многоточие (в том числе white-space: nowrap), текст беспорядок ширины столбца, что делает его подходящим для ширины текста, и многоточие не появляется.

.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>

Таблица 1 является текущим CSS я получил; Таблица 2 - как это должно быть.

Проблема, по-видимому, заключается в отсутствии различия в ширине разделительных элементов, которые должны соблюдать контейнер table-cell. Я не знаю, как работать над этим. Как я могу улучшить .item-desc, чтобы сделать работу с многоточием и сохранить первоначальную ширину столбца?

Answer 1

table-layout: fixed Используйте для table - см демонстрационных ниже:

.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>