tinymce - 如何使用 text-overflow:ellipsis 和 tinymce

Question

我有一个主详细信息类型视图设置，您可以在右侧（详细信息）输入数据，它将显示在左侧（详细信息）的摘要中。我使用 CSS 和 jQuery 完成了这个视图。所有数据都来自 mysql 数据库。

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

CSS：

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

这是一个精简的 jsFiddle，其中包含添加了 tinymce html 标记的结果数据以及左侧发生的情况。

现在这是一个版本，我去掉了<p>标签并且省略号正确显示。

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

我愿意接受其他建议。

score 2 · Accepted Answer

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

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

1 回答 1