如何使用文本溢出：带有tinymce的省略号

Question

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

问题是由插入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;    
}