我设法做到这一点。它带有一些警告：
- 它不是纯CSS；它不是纯CSS。您必须添加一些HTML元素。但是，不需要Javascript。
- 省略号在最后一行右对齐。这意味着，如果您的文本未正确对齐或对齐，则最后一个可见单词和省略号之间可能会有明显的差距（取决于第一个隐藏单词的长度）。
- 省略号始终保留。这意味着，如果文本几乎完全适合文本框，则可能会不必要地将其截断（最后一个单词是隐藏的，尽管从技术上讲不是必须的）。
- 您的文本必须具有固定的背景色，因为在不需要的情况下，我们使用彩色矩形隐藏省略号。
我还应注意，文本将在单词边界而不是字符边界处断开。这是有意的（因为我认为较长的文本比较好），但是因为它与实际text-overflow: ellipsis
情况有所不同，所以我认为我应该提一下。
如果您可以忍受这些警告，那么HTML如下所示：
<div > <div ></div> <div >…</div> <!-- your text here --> <span ></span> <div ></div></div>
这是相应的CSS，以一个150像素宽的框为例，在白色背景上带有三行文本。假定您有CSS重置或类似的重置，可在必要时将边距和填充设置为零。
.ellipsify { font-size:12px; line-height:18px; height: 54px; width: 150px; overflow: hidden; position: relative; background: white;}.pre-dots { float: right; height: 36px; }.dots { float: right; clear: right; }.hidedots1 { background: white; width: 150px; height: 18px; position: absolute; }.hidedots2 { background: white; width: 150px; height: 54px; position: absolute; }为了阐明其工作原理，以下是同一张图片，不同的.hidedots1是用红色和.hidedots2青色突出显示。当没有不可见的文本时，这些矩形将隐藏省略号：
在IE9，IE8（模拟），Chrome，Firefox，Safari和Opera中进行了测试。在IE7中不起作用。
