Html Can'；t使省略号与“显示：表格单元格”一起使用

我有一个用css

display:table

制作的布局。它只有两列。其中一列包含

ul

元素。它的

li

元素基本上是带有标题行和描述行的搜索结果项。我希望在描述行上应用省略号，使其仅保留在一行中，以便在溢出时其文本不会影响整个列的宽度：

左边是长文本的情况；应该是正确的

现在，当我尝试应用省略号（包括

空白：nowrap

）时，文本会弄乱列的宽度，使其适合文本宽度，省略号不会显示

.table{显示：表格；宽度：100%；边框：1px实心#f00；页边距底部：20px}
.table行{显示：table行}
.table cell{display:table cell；}
.表格单元格：第一个子项{宽度：30%；}
.table单元格ul{填充：0；边距：0}
.table单元格ul li{列表样式：无；}
.项目{边框：1px实心#000；}
.项目说明{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}

表1-问题


项目1
项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1
项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1
项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1


这里什么都没有
表2-它应该如何工作


项目1
项目1项目1项目1项目1项目。。。


这里什么都没有

使用

表格布局：固定的
表格
-见下面的演示：


.table{
显示：表格；
宽度：100%；
边框：1px实心#f00；
边缘底部：20px；
表布局：已修复；/*已添加此*/
}
.表格行{
显示：表格行
}
.表格单元格{
显示：表格单元格；
}
.表格单元格：第一个子{
宽度：30%；
}
.表单元格ul{
填充：0；
保证金：0
}
.表单元格ul li{
列表样式：无；
}
.项目{
边框：1px实心#000；
}
.项目说明{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}



项目1
项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1


这里什么都没有
省略号规则：非常好用！！