html段落の1行あたりの単語数を制限するにはどうすればよいですか？

Question

私は約100語を含む段落を持っています。私は最大の単語数を1行につき10に制限したいと思います。 CSSでwidthプロパティを使用しましたが、フォントサイズが小さくなると制限を超えます。 1行あたりの単語数を制限するにはどうすればよいですか？どんな助けもありがとう。

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

出力はライン当たりわずか10単語を含むHTML段落でなければならない：

例このアプローチで

 
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あります再び空白でまとめる。 10番目の単語ごとに新しい行が付けられます。

もっと洗練されたアプローチがあると確信しています。

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>。 ）10単語ごとに。

次の例をご覧下さい：

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/