CODEWITHSUNDEEP
javascripthtmlcss
Abdou
Abdou

Reputation: 40

In CSS/JS, how to word-wrap at every nth word?

I want to add a paragraph to my web page but when I write, the text fills the full width of the screen.

<p>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>

I want, for example, to specify that only 25 words can fit on each line with css or JavaScript, before wrapping to next line.

Upvotes: 0

Views: 976

Answers (3)

user3310334
user3310334

Reputation:

This is actually surprisingly easy, I'd suggest wrapping at a certain width, but because you stated specifically you want to wrap every 25 words, here you go:

Array.prototype.slice.call(document.querySelectorAll("p")).forEach(function(el) {
  el.innerHTML = el.innerText.match(/(\S+\s*){1,10}/g).join("<br>");
                                    //        ^^ 10 - number of words to wrap at
});
<p>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text</p>

Since 25 words is too wide for stack overflow, I wrapped at ten words instead, but you can do whatever.

Really, I wrote it across three lines, but it is just one line of JavaScript.

Upvotes: 1

user3310334
user3310334

Reputation:

It's difficult to wrap every 25 words, but you can set a specific width to wrap at:

p {
    max-width: 400px;
}
<p>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>

But, you can still do it every n words, it just might lead to inconsistencies as words can be different lengths:

var p = document.getElementById("paragraph").innerText;

p = p.match(/(\S+ ){1,10}/g).join("<br>");

document.getElementById("paragraph").innerHTML = p;
<p id="paragraph">Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>

Note: I've wrapped every 10 words, but you could just as easily wrap after as many words as you want, just replace the 10 in the match regex with 25.

Upvotes: 2

Radhouane Fazai
Radhouane Fazai

Reputation: 341

you need to specify the p width or put it within a container that has a defined width 

p.longtext {
    width:200px; 
}
<p class='longtext'>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>

Upvotes: -1

Related Questions