顯示從div標簽中顯示的文本編輯器生成的格式化文本的省略號

Question

使用編輯器輸入一些文本。 編輯器將文本轉換為相應的html。 我必須將此文本顯示為帶有省略號的小注釋，以防文本太長。

請在這里找到plunker： 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