Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – CSS Text ellipsis returns first line of every paragraph

I am trying to apply ellipsis on a text but it takes first line of all the paragraphs. However, I want the first line of the content only.

The Sample Content

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.

What I am getting

enter image description here

What I really want

enter image description here

Here is my CSS code

.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>

How can I achieve the required output?

Tags:

2

Answers


  1. 0

    Text ellipsis only applies to the width of a single long paragraph.

    So here, you have to remove the <br /> tag and have to use n, if possible. Otherwise, it will take it as a separate section inside that division/paragraph.

    Or else, you can make its height fixed and manage it from a CSS perspective.

    Login or Signup to reply.
  2. 0

    Try This One :

    .message  {
  white-space: nowrap; 
  width: 350px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}
    <div class="message">
  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.
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search