Question

我有一个包含大约100个单词的段落。我想将每行的最大字数限制为10。我在css中使用了width属性，但是当字体大小减小时，限制超过了。如何限制每行的字数？任何帮助，将不胜感激。

示例：

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

＆＃13;

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

＆＃13;

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>

更新：替代<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处休息，可以使用正则表达式：

＆＃13;

document.addEventListener('DOMContentLoaded', () => {

  var p = document.querySelector('#test');

  p.innerHTML = p.textContent.replace(
    /((?:\S+\s+){10}\S+)/g, '$1<br />'
  );

})

＆＃13;

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

＆＃13;

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/

如何限制html段落中每行的单词数量？

5 个答案: