如果需要，将附加的句子分成多行答案

【问题标题】：Break the appended sentence to multiple lines if needed如果需要，将附加的句子分成多行
【发布时间】：2020-03-04 02:23:33
【问题描述】：

我想在页面上附加一个句子或段落，同时保留单词的 id，以便以后可以更改每个单词的颜色。

代码运行良好，除了一个我需要帮助才能找到解决方案的问题。

如果需要，我想查看多行的长句。到目前为止，长句子都停留在单行中，您无法看到整个句子！

我使用word-wrap: break-word;没有成功！

let shortSentence = ['i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you']

let longSentence = ['i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you', 'i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you', 'i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you','i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you']

//generateParagraph(shortSentence); // Works fine
generateParagraph(longSentence); // Not working

function generateParagraph(sentence) {

    let paragraph = document.getElementById("paragraph");

    for(let i = 0; i < sentence.length; i++){
        sentence[i] = ' ' + sentence[i];
    }
    sentence[0] = sentence[0].trim();

    let paragraphSpans = '';

    for (let i = 0; i < sentence.length; i++) {

      paragraphSpans += `<span class='spans' id='spanID${i}'>${sentence[i]}</span>`;

    };

    paragraph.innerHTML = `${paragraphSpans}`;

};

html{
  overflow: hidden;
  background-color: transparent;
}

.paragraphContainer {
    position: absolute;
    overflow: hidden;
    left: 8.7vw;
    top: 25vh;
    height: 55vh;
    width: 82vw;   
    outline: 0.1vw dashed orange;
}

.paragraph-class {
    position: absolute;
    white-space: pre-wrap; 
   /* word-wrap: break-word;*/
    font-family: 'Open Sans', sans-serif;  
    font-weight:400;
    font-size:2vw;
    color: #595959;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html>
<head>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">

</head>

<body> 

<div class="paragraphContainer"> 
<div id="paragraph" class="paragraph-class"></div>
</div>


<script src="script.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

将flex-wrap: wrap; 添加到您的.paragraph-class

let shortSentence = ['i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you']

let longSentence = ['i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you', 'i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you', 'i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you','i', 'love', 'my', 'family', 'so', 'much', 'what', 'about','you']

//generateParagraph(shortSentence); // Works fine
generateParagraph(longSentence); // Not working

function generateParagraph(sentence) {

    let paragraph = document.getElementById("paragraph");

    for(let i = 0; i < sentence.length; i++){
        sentence[i] = ' ' + sentence[i];
    }
    sentence[0] = sentence[0].trim();

    let paragraphSpans = '';

    for (let i = 0; i < sentence.length; i++) {

      paragraphSpans += `<span class='spans' id='spanID${i}'>${sentence[i]}</span>`;

    };

    paragraph.innerHTML = `${paragraphSpans}`;

};

html{
  overflow: hidden;
  background-color: transparent;
}

.paragraphContainer {
    position: absolute;
    overflow: hidden;
    left: 8.7vw;
    top: 25vh;
    height: 55vh;
    width: 82vw;   
    outline: 0.1vw dashed orange;
}

.paragraph-class {
    position: absolute;
    white-space: pre-wrap; 
   /* word-wrap: break-word;*/
    font-family: 'Open Sans', sans-serif;  
    font-weight:400;
    font-size:2vw;
    color: #595959;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* new css */
    flex-wrap: wrap;
    padding: 20px; /* optional */
}

<!DOCTYPE html>
<html>
<head>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">

</head>

<body> 

<div class="paragraphContainer"> 
<div id="paragraph" class="paragraph-class"></div>
</div>


<!-- <button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
  Read();
});
</script> -->


<script src="script.js"></script>
</body>

</html>

【讨论】：

@T.J.Crowder 我的意思是.paragraph-class 抱歉，复制/粘贴问题：P