Html 设置表格单元格的文本溢出

我正在尝试用3列和固定宽度的css表，比如说，200px1st和2nd列的宽度应该根据文本的长度自动调整，但是文本的长度会略有变化，比如说，它将是1-4个字母，假设我们事先知道（这就是为什么

表布局：auto；

）。但是对于3rd列，文本长度事先不知道，它可能很长，如果是这样的话，那么它应该显示单个文本行，并在末尾用“…”优雅地截断，就像设置

文本溢出：省略号时一样

我需要这样的东西：

col1 | col2 | col3
----------------------------------------
t    | text | te xt text
text | t    | text
tex  | txt  | long text, long text te...

以下是我到目前为止所编写的代码（或参见此处的CodePen:）：


。固定宽度{
宽度：200px；
}
.桌子{
显示：表格；
表格布局：自动；
宽度：100%；
}
.表格行{
显示：表格行；
}
.表格单元格{
显示：表格单元格；
宽度：1%；
边框：1px纯灰；
填充物：5px；
}
.表格单元格\长文本{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

文本1
文本2文本2
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
据我所知，您在表格单元格中用省略号将文本换行时遇到的问题，请注意：


文本溢出：省略号
仅适用于
显示：块
，不适用于
显示
属性的任何其他属性。因此，将
display:block
分配给应包含省略号截断文本的单元格。此外，由于宽度是处理文本溢出条件时必须使用的属性，因此已给出了宽度

如果问题陈述中有什么我听不懂的地方，请告诉我


。固定宽度{
宽度：200px；
}
.桌子{
显示：表格；
表格布局：自动；
宽度：100%；
}
.表格行{
显示：表格行；
}
.表格单元格{
显示：表格单元格；
宽度：1%；
边框：1px纯灰；
填充物：5px；
高度：40px；
}
.表格单元格\长文本{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
显示：块；
宽度：50%；
}

文本1
文本2文本2
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
我用你的代码创建了一支笔，并在其中添加了一些jQuery：也许这会有所帮助：）@Kathara OP正在构建一个React应用程序。。。他们不可能在其中加载jQuery，尤其是为此。@Kathara非常感谢=），但是的，这是React应用程序，所以首先我将尝试找到一个不使用额外javascript的解决方案。@Vasily抱歉，我对React一无所知，但也许你可以用React来调整它？它也是Javascript，不是吗？也许你可以做类似的事情。如果不是，至少我今天有点创意^^