How to add a line break after a certain amount of characters?

Question

How to add a line break after a certain amount of characters?

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

I have a variable that receives text, I would like to insert a line break in this text after the 40th character in jQuery.

This line especially:

$(".chat").append('<li class="other"><div class="msg"><span>' + client + ':</span><p>' + msg + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');

The variable msg would need to receive a line break after the 40 character to fit within the div horizontally, vertically the div can grow as much as horizontally, it should maintain 200px or less. p>

DIV:

.msg {
    background: white;
    min-width: 50px;
    max-width: 200px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}

jquery

asked by anonymous 09.01.2018 / 18:45

2 answers

1

This is how you can add what you want to every 40, and you can also customize this number according to your need.

Remembering that the best solution is not this, the correct one is via CSS, but it is not the main focus of the question. Julio replied, if it is correct, it is the best way.

var msg = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim nulla, feugiat at nisi at, consectetur efficitur eros. Suspendisse tincidunt luctus ante, quis bibendum erat vulputate sit amet. Nunc metus sapien, porttitor sed luctus eget, pulvinar vitae dolor. Pellentesque sagittis bibendum tortor a laoreet. In tristique orci et eros tempus, et commodo metus scelerisque. Aliquam mollis metus ac lacinia dictum. Maecenas elementum venenatis lectus, ac tincidunt neque dapibus non. Sed finibus suscipit nisi, quis rhoncus sem ullamcorper in. Curabitur bibendum leo lacus, sed condimentum eros maximus interdum. Nulla congue consectetur feugiat. Aliquam ac feugiat nunc. Vivamus laoreet dictum leo. Fusce dictum laoreet erat, non ultrices tortor feugiat id. Maecenas vitae sem mollis, venenatis dui non, tincidunt lacus. Maecenas dictum purus.';


var i =0;
var numOfCharacters = 40;
var msgArray = msg.split(''); //Transforma em array
msg = '';
for(i = 0; i < msgArray.length; i++){ //Percorre array
    msg += msgArray[i];//Reescreve a string
    if((i+1)%numOfCharacters == 0){ //Se for divisivél por 40 insere  quebra de linha
      msg += '<br>';
    };
};
$("#message").append(msg);//Insere no HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="message">

</div>

09.01.2018 / 19:23

How to print the name of the method, file and line that was called? P closing before the / P tag

score 4 · Accepted Answer

You're doing this the wrong way. You have to define this "rule" in the div.

I put your problem as an example in this jsfiddle

use the css property word-wrap: break-word

How to apply this css in your code?

In this line place the paragraph class

$(".chat").append('<li class="other"><div class="msg"><span>' + client + ':</span><p class="meuP">' + msg + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');

(basically replace this <p> so <p class="meuP">

Set the "myP" class to the property I told you about in CSS:

.meuP {      
  word-wrap: break-word;      
}