显示从div标签中显示的文本编辑器生成的格式化文本的省略号

Question

使用编辑器输入一些文本。编辑器将文本转换为相应的html。我必须将此文本显示为带有省略号的小注释，以防文本太长。

请在此处找到关于这个问题：Plunker

请注意，文本不是纯文本，而是html。我试图隐藏溢出，但如果文本太长，我必须显示省略号。

我的CSS：

.note{
  padding:10px;
  background:#e2e2e2;
  height:150px;
  width:200px;
} 

[编辑] [] 2

Answer 1

您需要的是：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但是如果你将它们添加到note类中，它看起来很奇怪，因为带有note类的元素具有块子元素。

演示： https://plnkr.co/edit/AJYQU37AwZssvMTAZZvQ?p=preview

不确定您需要什么，但这里有一个替代方案：

.note {
  padding: 10px;
  background: #e2e2e2;
  height: 150px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note u {
  white-space: nowrap;
}

演示： https://plnkr.co/edit/TFCGTJhifw2wF6oWv83x?p=preview