Если нужно, разбейте добавленное предложение на несколько строк - PullRequest
Новая
       0

Если нужно, разбейте добавленное предложение на несколько строк

2 голосов
/ 03 марта 2020

Я хочу добавить предложение или абзац на страницу, в то время как я сохраняю идентификатор слов, чтобы позже я мог изменить цвет каждого слова.

Код работает нормально, за исключением одной проблемы, в которой мне нужна помощь, чтобы найти решение.

Я хочу просматривать длинные предложения в несколько строк , если это необходимо. Пока длинные предложения остаются в одной строке, и вы не можете видеть все предложение!

Я использовал 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>

1 Ответ

3 голосов
/ 03 марта 2020

Добавьте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...