如何限制html段落中每行的字數？

Question

我有一段包含大約100個單詞。我想限制每行的最大字數爲10。我在CSS中使用了寬度屬性，但是當字體大小減少時，限制超過了。我怎樣才能限制每行的文字？任何幫助，將不勝感激。

實施例：

<p>The key takeaway for understanding the shift towards VR & AR is their collective push towards enabling people to engage more naturally with computers — by simply looking, gesturing, conversing, and being — as opposed to dealing with interfering and unnatural interfaces like mice, keyboards, and flat screens. Less interference means more immersion. And more immersion means more humanity, empathy, and potential for transformation in our experience — both relating to computers, and to each-other.</p> 

輸出應該是一個HTML段，每行只有10個字：

 
The key takeaway for understanding the shift towards VR & 
AR is their collective push towards enabling people to engage 
more naturally with computers — by simply looking, gesturing, conversing, and being — as 
opposed to dealing with interfering and unnatural interfaces like mice, 
keyboards, and flat screens. Less interference means more immersion. And 
more immersion means more humanity, empathy, and potential for transformation 
in our experience — both relating to computers, and to each-other. 

Answer 1

在這種方法中，該字符串是split由空格然後，在一個循環中，白色空間再次放在一起。然後給每一個第十個單詞一個新的行。

我相信有一個更優雅的方法。

var str = 'The key takeaway for understanding the shift towards VR & AR is their collective push towards enabling people to engage more naturally with computers — by simply looking, gesturing, conversing, and being — as opposed to dealing with interfering and unnatural interfaces like mice, keyboards, and flat screens. Less interference means more immersion. And more immersion means more humanity, empathy, and potential for transformation in our experience — both relating to computers, and to each-other.', 
 
    parts = str.split(' '), 
 
    outStr = ''; 
 

 
//Combine each word 
 
for (var i = 0; i < parts.length; i++) { 
 
    outStr += ' ' + parts[i]; 
 
    
 
    //every tenth word, add a new-line. Change this to '<br/>' if you want html. 
 
    if ((i + 1) % 10 === 0) { 
 
    outStr += "\n"; 
 
    } 
 
} 
 
console.log(outStr);

Answer 2

這可能是你正在尋找的東西。隨意更換\n任何你想要的：

const refineParagraph = ((text, limit, delimiter) => { 
 
    return text.split(' ').reduce((a, b, i) => (i % limit) ? a + ' ' + b : a + ' ' + b + delimiter); 
 
}); 
 

 

 
let paragraph = 'The key takeaway for understanding the shift towards VR & AR is their collective push towards enabling people to engage more naturally with computers — by simply looking, gesturing, conversing, and being — as opposed to dealing with interfering and unnatural interfaces like mice, keyboards, and flat screens. Less interference means more immersion. And more immersion means more humanity, empathy, and potential for transformation in our experience — both relating to computers, and to each-other.' 
 

 
let refined = refineParagraph(paragraph, 10, '\n'); 
 

 
console.log(refined);

Answer 3

你可以以添加一個新行（例通過每一個字split輸入字符串轉換成文字和循環數組<br>。 ）每十個字。

看看下面的例子，請：

var elem = document.getElementById("myText"); 
 
var words = elem.innerHTML.split(' '); 
 
var wrappedText = ''; 
 

 
words.forEach(function(word, i){ 
 
    if(i > 0 && (i+1) % 10 == 0) 
 
    wrappedText += word + '<br>'; 
 
    else 
 
    wrappedText += word + ' '; 
 
}); 
 

 
elem.innerHTML = wrappedText;

<div id="myText">The key takeaway for understanding the shift towards VR & AR is their collective push towards enabling people to engage more naturally with computers — by simply looking, gesturing, conversing, and being — as opposed to dealing with interfering and unnatural interfaces like mice, keyboards, and flat screens. Less interference means more immersion. And more immersion means more humanity, empathy, and potential for transformation in our experience — both relating to computers, and to each-other. 
 
</div>

UPDATE：替代與<pre>（即保持壓痕，空格和換行）和\n

var elem = document.getElementById("myText"); 
 
var words = elem.innerHTML.split(' '); 
 
var wrappedText = ''; 
 

 
words.forEach(function(word, i){ 
 
    if(i > 0 && (i+1) % 10 == 0) 
 
    wrappedText += word + '\n'; 
 
    else 
 
    wrappedText += word + ' '; 
 
}); 
 

 
elem.innerHTML = wrappedText;

<pre id="myText">The key takeaway for understanding the shift towards VR & AR is their collective push towards enabling people to engage more naturally with computers — by simply looking, gesturing, conversing, and being — as opposed to dealing with interfering and unnatural interfaces like mice, keyboards, and flat screens. Less interference means more immersion. And more immersion means more humanity, empathy, and potential for transformation in our experience — both relating to computers, and to each-other. 
 
</pre>

我希望它能幫助你，再見。

Answer 4

我認爲你應該使用hypenation，因爲在不查看含義的情況下斷行可能最終導致可用性問題。

但是，如果你只是想在10 word occurrence打破，你可以使用正則表達式：

document.addEventListener('DOMContentLoaded',() => { 
 

 
    var p = document.querySelector('#test'); 
 

 
    p.innerHTML = p.textContent.replace(
 
    /((?:\S+\s+){10}\S+)/g, '$1<br />' 
 
); 
 

 
})

<p id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ad aliquid assumenda consequatur eligendi ex harum in iure libero molestiae natus repellendus sunt veniam. Ipsa nemo omnis perspiciatis quae sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ad aliquid assumenda consequatur eligendi ex harum in iure libero molestiae natus repellendus sunt veniam. Ipsa nemo omnis perspiciatis quae sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ad aliquid assumenda consequatur eligendi ex harum in iure libero molestiae natus repellendus sunt veniam. Ipsa nemo omnis perspiciatis quae sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ad aliquid assumenda consequatur eligendi ex harum in iure libero molestiae natus repellendus sunt veniam. Ipsa nemo omnis perspiciatis quae sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ad aliquid assumenda consequatur eligendi ex harum in iure libero molestiae natus repellendus sunt veniam. Ipsa nemo omnis perspiciatis quae sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ad aliquid assumenda consequatur eligendi ex harum in iure libero molestiae natus repellendus sunt veniam. Ipsa nemo omnis perspiciatis quae sint!</p>

Answer 5

的Javascript

var getString = document.getElementById("string").innerHTML; 
var output = document.getElementsByClassName("output")[0]; 
var totalWord = getString.split(" "); 
for(var i = 0; i < totalWord.length;i++){ 
    if(i % 10 == 0 && i > 0){ 
    output.innerHTML = output.innerHTML + totalWord[i] + "<br>"; 
    }else{ 
    output.innerHTML = output.innerHTML + totalWord[i] + " "; 
    } 
} 

HTML：

<p id="string">The key takeaway for understanding the shift towards VR & AR is their collective push towards enabling people to engage more naturally with computers — by simply looking, gesturing, conversing, and being — as opposed to dealing with interfering and unnatural interfaces like mice, keyboards, and flat screens. Less interference means more immersion. And more immersion means more humanity, empathy, and potential for transformation in our experience — both relating to computers, and to each-other. 
</p> 

<div class="output"></div> 

https://jsfiddle.net/Rakowu/1f787pw8/