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

【问题标题】：Show ellipsis for formatted text generated from text editor displayed in div tag显示从 div 标签中显示的文本编辑器生成的格式化文本的省略号
【发布时间】：2016-01-07 07:57:22
【问题描述】：

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

请在此处找到 plunker：Plunker

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

我的 CSS：

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

[编辑] []2

【问题讨论】：

这对您解决问题有帮助吗？

标签： javascript html css angularjs editor

【解决方案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

【讨论】：

感谢您的回答。 note 容器内的标签只是示例，它可以是 CK 编辑器生成的任何内容。我无法控制它。我已经使用 js 为注释文本设置了字符限制。但问题是当有人添加一些文本并按 Enter 并重复该过程时，字符限制将不起作用。
你的意思是这对你不起作用吗？您可以在 plunker 中复制真实场景吗？否则很难提供帮助。
是的。它行不通。我已经更新了问题并添加了一张图片来描述问题。谢谢edit 因此，在编辑器中输入的文本将具有包括行高在内的任何类型的格式，将显示在我使用 js 设置文本限制为 100 个字符的注释框中。但问题是，当有人通过多次按 Enter 来添加文本时，文本限制变得不可用，因为 Enter 会将每个文本带到新行并溢出框，因为不会达到文本限制。
除非您在 plunker 中复制真实场景，否则我无能为力。不打算只是猜测，对不起。