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

Asked

Viewed 1,544 times

2

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

That 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 character 40 to fit inside the div horizontally, vertically to div can grow as much as it is, horizontally no, should keep 200px or less.

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

  • It has how to put the code you have at the moment?

2 answers

4


You’re doing this the wrong way.Because you have to define this "rule" in the div.

I set your problem as an example in this jsfiddle

use the css property word-wrap: break-word

How to apply this css to your code ?

On this line put 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 that <p> therefore <p class="meuP">

Define the class "meuP" with the property I mentioned about CSS:

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

  • It worked correctly. Vlw Julio!

1

It looks like this, so you can add whatever you want to every 40, and you can also customize that number according to your need.

Remembering that the best solution is not this, the correct is via CSS, but is not the main focus of the question. Julio said, if you’re right it’s 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>

<div id="message">

</div>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.