I want to add ellipsis to a text, but it keeps including the first line of all paragraphs. What I actually need is for only the first line of the content to have the ellipsis applied.
Here is an example of the content:
When using websocket to send messages, this code snippet is executed. However, '+ msg +' does not recognize new lines (line breaks) in the message. Each sentence appears on the same line.
Can you help optimize this jQuery code so that '+ msg +' can identify new lines?This is what I am currently seeing:
https://i.sstatic.net/uRbPX.png
This is what I really want:
https://i.sstatic.net/TSIxt.png
Below is my CSS styling:
.content .message {
font-size: 0.8rem;
color: #afb9d7;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}And here is the corresponding HTML:
<div class="content">
<div class="name">Shreyansh Jha</div>
<div class="message" data-msg="When sending messages via websocket, this code is triggered. However, '+ msg +' does not detect new lines (line breaks) in the message. Every sentence ends up on the same line.<br />
<br />
To fix this issue with detecting new lines, optimize this jQuery code so that '+ msg +' can identify them properly.">When sending messages via websocket, this code is triggered. However, '+ msg +' does not detect new lines (line breaks) in the message. Every sentence ends up on the same line.<br>
<br>
To fix this issue with detecting new lines, optimize this jQuery code so that '+ msg +' can identify them properly.
</div>
</div>How can I achieve the desired output in this scenario?