CSS 文本省略掉每个段落的其余部分，只显示第一行。

Question

我正在尝试对一段文本应用省略号（ellipsis），但是它会截取所有段落的第一行。然而，我只想显示内容的第一行。

示例内容：

通过websocket发送消息时会触发这段代码。然而，+ msg + 并不能识别消息中的换行符（line breaks）。每一句话都显示在同一行中。

优化这段jQuery代码，使+ msg +能够检测到换行。

目前我得到的结果如图所示：

而我真正想要的效果是：

这是我的CSS样式代码：

.content .message {
  font-size: 0.8rem;
  color: #afb9d7;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

HTML结构如下：


  Shreyansh Jha 
  
    While sending message via websocket this code is triggered. However, '+ msg +' does not detect new lines (line breaks) in the message. Every sentence appears in the same line. 
    

    

    Optimize this jquery code so that '+ msg +' can detect new lines.

如何实现输出的结果呢？

Cade Roux · Answer

文本省略仅适用于单个长段落的宽度。因此，在这种情况下，你需要删除标签，并尽可能使用来换行。否则，它会被视为该段落/分区内的独立部分。另外，你也可以设置固定的高度并通过CSS进行管理。

jww · Answer

尝试这段代码：




  While sending message via websocket this code is triggered. However, '+ msg +' does not detect new lines   (line breaks) in the message. Every sentence appears in the same line.
  Optimize this jquery code so that '+ msg +' can detect new lines.