在CSS / JS中，如何在第n个单词处自动换行？

Question

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.

Answer 1

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 .

Answer 2

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(e){ e.innerHTML = e.innerText.match(/(\\S+ ){1,10}/g).join("<br>"); // ^^ 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.

Answer 3

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>