在CSS中用省略号截断文本（嵌套div，而不是HTML表）

我有一张固定宽度的“桌子”。该表有一个“标题”和一个或多个“行”。每行包含两个“单元格”，一个标签和一个值

注意：在这种情况下，我实际上没有使用

表。上面的那些表、行等引用实际上是
div
s，具有适当的
display:table-*
样式

我希望第一列单元格（标签）的大小自然（当它们太宽时，我可以根据需要修改文本）。而且，我希望第二列单元格不要超过“表”的宽度。也就是说，如果单元格的值太长，我希望用省略号将其截断


那把小提琴好像离我很近，但有什么东西在逃避我。如何修复CSS以使绿色值不超过预期宽度


正文{
字体系列：Calibri；
}
.预期宽度{
宽度：300px；
}
.标题{
最大宽度：300px；
背景颜色：黄色；
利润底部：4倍；
左边框：1px点红色；
右边框：1px点红色；
文本对齐：居中；
}
.卡片列表{
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}
.卡片{
边界间距：0px；
填充：0px；
显示：表格；
}
.标题{
文本对齐：左对齐；
背景颜色：浅灰色；
显示：表格标题；
宽度：100%；
}
.t车身{
显示：表格行组；
}
.行{
背景颜色：灰色；
显示：表格行；
}
.细胞{
显示：表格单元格；
}
.cell.col1{
背景颜色：浅蓝色；
右侧填充：4px；
}
.cell.col2{
背景颜色：浅绿色；
}
这是预期的宽度。
此表应为预期宽度。
主题：
应按预期宽度截断的某些长值。
概率：
50%
埃尔维斯：
普雷斯利
42:
生命、宇宙和一切的答案
显示：表格单元格
不适用于
文本溢出：省略号

考虑更改布局以使用宽度或百分比的
display:inline block
（这是仅css省略号的要求）来实现您的目标。从技术上讲，不管怎么说，这可能是一种语义上更正确的方法，尽管表格单元格布局被广泛使用…
要实现这一点，请应用

table-layout: fixed

到表级
div
和

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

到需要截断的单元格。这是对原来问题的一个有效修改：


正文{
字体系列：Calibri；
}
.预期宽度{
宽度：300px；
}
.卡片{
显示：表格；
表布局：固定；
}
.截断{
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}
.标题{
背景颜色：矢车菊蓝；
字体大小：粗体；
显示：表格标题；
}
.t车身{
显示：表格行组；
}
.行{
背景颜色：灰色；
显示：表格行；
}
.细胞{
显示：表格单元格；
}
.cell.col1{
背景颜色：浅蓝色；
宽度：30%；
}
.cell.col2{
背景颜色：浅绿色；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}

此标题太长，但应为预期宽度。
主题：
应按预期宽度截断的某些长值。
概率：
50%
埃尔维斯：
普雷斯利
42:
生命、宇宙和一切的答案
请在问题中包含代码。为此，您可以使用SO的新代码段特性……就像JSFIDLE一样，但嵌入到问题中。查找带有
的按钮或点击Ctrl+M。发布此内容后，我又看到一篇相关文章，并拨打了我的解决方案。将
表格布局
与设置第一列的宽度相结合，我得到了一个可以根据需要进行截断的工作解决方案：这是我第一次使用SO的新代码段功能。“谢谢，”琼普，你指出了这一点。还有，根据我的要求，从我的原始小提琴中插入的代码。你知道，@misterManSam，我想我们可以称之为重复代码。我应该自己删除它，还是把它留给后代（标记为副本）？正是这个答案，以及这个问题被接受的答案，让我找到了我的解决方案：@JMD-我实际上会把它标记为一个。在这里发布一个答案并接受它，然后用该链接进行一次重复的投票。我将从第一次投票开始：）你可能是对的，我应该转换到
内联块。我已经完全摆脱了
的使用，但即使是
table-*
样式的div也感觉像一根拐杖。@JMD-a
对于您想要在这里显示的内容来说是一个不错的选择。在语义上适当的表用法没有错@先生，是的，人们往往忽略了，
完全可以用于表格数据，而不是屏幕布局。使用嵌套的
标记模拟
几乎和使用
布局一样糟糕<代码>
被保留在HTML5规范中是有原因的。我会记住这一点，@JonP和misterManSam。我现在“看到”了区别。也就是说，我在使用表时遇到了相同的截断问题，但上面提到的重复问题实际上是该场景的答案，我在这里使它适用于基于div的表。（谢谢你的教训。我今天学到了一些东西。）