仅显示完全适合父div的HTML元素？ （包括JsFiddle示例）

Question

JS Fiddle Example

我有一个包含用户生成的HTML元素的div。 div中的每一行可以是任意数量的字符，但只显示在一行上，并且不会换行。 我的问题是部分元素是垂直显示的，并且由于HTML元素的多样性，我无法准确预测到可以容纳多少行文本。

下面的图片显示了问题，在这种情况下只使用列表项元素（用红色箭头突出显示。）我已经包含HTML和CSS也在下面。

我一直在寻找一个与ReactJS兼容的解决方案，以防止显示不完全适合的元素（我几乎可以使用任何CSS，NPM模块，JavaScript代码段，只需要jQuery。）所有元素都需要保留静态大小，因此不幸的是，动态调整文本或容器的大小也是不合适的。

解决方案只需在Chrome中使用。

不幸的是，尽管在NPM或CSS解决方案（例如-webkit-line-clamp）上以模块的形式搜索解决方案，但我发现没有什么合适的。 -webkit-line-clamp只对单个元素中的文本起作用（据我所知），因此它将修复一个包含5行的段落，但它不会修复5个单行段落。

任何关于如何解决这个问题的想法都会受到重视。几个月来我一直在努力奋斗。非常感谢你阅读。