tinymce - 如何使用文本溢出:ellipsis with tinymce

Question

我有一个主细节类型 View 设置，您可以在右侧(细节)输入数据，它会显示在左侧(细节)的摘要中。我使用 CSS 和 jQuery 完成了这个 View 。所有数据均来自 mysql 数据库。

问题是tinymce插入textarea的html标签引起的。当我尝试使用 text-overflow:ellipsis; 显示它时CSS 它没有放在省略号中。

CSS:

.OverflowData {
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Here是一个精简的 jsFiddle，结果数据添加了 tinymce html 标签，左侧发生了什么。

现在Here是我去掉了 <p> 的版本标记和省略号正确显示。

所以我的问题是:在第一种情况下是否可以正确显示摘要和省略号，或者我必须事先从 tinymce textarea 中删除所有 html？

我愿意接受其他建议。

Answer 1

设置必须在直接父级上，以便在添加到您的示例时有效(注意选择器中的“p”):

.OverflowData p {
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;    
}