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

Question

我想在我的网页上添加一个段落，但是当我编写时，文本会填满整个屏幕的宽度。

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

我想要的，例如，指定只有25个字能适应与CSS或JavaScript的每一行，包装到下一行之前。

Answer 1

你需要指定在p宽度或把它有一个定义的宽度

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>

Answer 2

是很困难的包裹每25个话的容器内，但你可以设置一个具体宽度包装在：

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>

但是，你仍然可以做它的每一个n的话，也许会导致不一致的话可以是不同长度：

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>

注：我每隔10个字就会包裹一次，但您可以轻松地按照自己想要的方式换行，只需将匹配正则表达式中的10替换为25。

Answer 3

这其实是非常容易的，我会在一定的宽度表明包装，而是因为你说专门要换行每25个字，在这里你去：

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>

由于25个字对于堆栈溢出来说太宽，我用十个字代替，但是你可以做任何事情。

真的，我是通过三行写的，但它只是一行JavaScript代码。