在CSS/JS中，如何在每第n個單詞換行？

我想在我的網頁上添加一個段落，但是當我編寫時，文本會填滿整個屏幕的寬度。在CSS/JS中，如何在每第n個單詞換行？

<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的每一行，包裝到下一行之前。

來源

2015-01-11 Abdou

你的問題是什麼？ – undefined

在生成HTML的服務器上，每25個單詞添加一個'
'，或添加一個換行符並指定格式化，如保留換行符的'white-space：pre'。或者，編寫JS，它在頁面的生命週期中適當的時間點執行相同的操作。 –

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

來源

2015-01-11 14:09:07

我不明白 - 這不能回答這個問題。爲什麼被接受？ –

@torazaburo：我認爲他不需要一個x（他的例子中有25個）字數，但他需要一種方法來控制他的段落寬度，我想我的假設是正確的，因爲他接受了它。另一方面，我同意你的觀點，我的文章並沒有真正回答這個問題（在編輯之前檢查問題） –

是很困難的包裹每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。

來源

2015-01-11 14:14:17 theonlygusti

這其實是非常容易的，我會在一定的寬度表明包裝，而是因爲你說專門要換行每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代碼。

來源

2015-01-11 18:11:29 theonlygusti

在CSS/JS中，如何在每第n個單詞換行？

回答

相關問題