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

Question

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

请在这里找到 plunker:Plunker

请注意，文本不是纯文本，而是 html。我尝试 overflow hidden ，但如果文本太长，我必须显示省略号。

我的 CSS:

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

[编辑] [ ] 2

Answer 1

你需要的是:

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

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

演示: 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