CSS 文本省略号返回每个段落的第一行

Question

我试图在文本上应用省略号，但它占据了所有段落的第一行。但是，我只想要内容的第一行。

示例内容

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.

我得到了什么

我真正想要的东西

这是我的 CSS 代码

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

HTML

<div class="content">
  <div class="name">Shreyansh Jha </div>
  <div class="message " data-msg="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. <br />
    <br />
    Optimize this jquery code so that '+ msg +' can detect new lines.">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. <br>
    <br>
    Optimize this jquery code so that '+ msg +' can detect new lines.
  </div>
</div>

如何才能达到所需的输出？

Answer 1

您需要做的就是将 HTML 内容分解为单独的块。

以下是解决此问题的步骤：

1. 修改 HTML 结构： 您需要将内容的第一行与其余段落分开。这可以通过将第一行括在单独的

   div

   或

   span

   中来完成。

2. 仅将 CSS 应用于第一行： 调整 CSS，以便

   text-overflow: ellipsis;

   仅应用于这个新的

   div

   或

   span

   。

.content .message {
  font-size: 0.8rem;
  color: #afb9d7;
}

.content .message .first-line {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  /* Ensure this is a block element for ellipsis to work */
}

<div class="content">
  <div class="name">Shreyansh Jha</div>
  <div class="message">
    <div class="first-line" data-msg="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.">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.</div>
    <div>Optimize this jquery code so that '+ msg +' can detect new lines.</div>
  </div>
</div>

Answer 2

文本省略仅适用于单个长段落的宽度。 所以在这里，您必须删除
标签并必须使用以下结构，

<div class="message">
    <div>1st msg</div>
    <div>2nd msg</div>
</div>

此外，如果需要，您可以使用 tag 而不是 div。