我想在页面上附加一个句子或段落，同时保留单词的 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>最佳答案
将 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>关于javascript - 如果需要，将附加句子分成多行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60511493/