我想用一些淡入/淡出效果逐字逐句地顯示一些句子。但是，當試圖做到這一點時，看起來中間的單詞如下所示。我怎樣才能避免斷字？避免單詞分裂

var quotes = document.getElementsByClassName('quote'); 
 
var quoteArray = []; 
 
var currentQuote = 0; 
 
quotes[currentQuote].style.opacity = 0; 
 
for (var i = 0; i < quotes.length; i++) { 
 
    splitLetters(quotes[i]); 
 
} 
 
function changeQuote() { 
 
    var cw = quoteArray[currentQuote]; 
 
    var nw = currentQuote == quotes.length-1 ? quoteArray[0] : quoteArray[currentQuote+1]; 
 
    for (var i = 0; i < cw.length; i++) { 
 
    animateLetterOut(cw, i); 
 
    } 
 
    for (var i = 0; i < nw.length; i++) { 
 
    nw[i].className = 'letter behind'; 
 
    nw[0].parentElement.style.opacity = 1; 
 
    animateLetterIn(nw, i); 
 
    } 
 
    
 
    currentQuote = (currentQuote == quoteArray.length-1) ? 0 : currentQuote+1; 
 
} 
 
function animateLetterOut(cw, i) { 
 
    setTimeout(function() { 
 
\t \t cw[i].className = 'letter out'; 
 
    }, 0); 
 
} 
 
function animateLetterIn(nw, i) { 
 
    setTimeout(function() { 
 
\t \t nw[i].className = 'letter in'; 
 
    }, 340+(i*30)); 
 
} 
 
function splitLetters(quote) { 
 
    var content = quote.innerHTML; 
 
    console.log(quote.innerHTML); 
 
    quote.innerHTML = ''; 
 
    var letters = []; 
 
    for (var i = 0; i < content.length; i++) { 
 
    var letter = document.createElement('span'); 
 
    letter.className = 'letter'; 
 
    letter.innerHTML = content.charAt(i)==' '?'&nbsp;':content.charAt(i); 
 
    quote.appendChild(letter); 
 
    letters.push(letter); 
 
    } 
 
    
 
    quoteArray.push(letters); 
 
} 
 
changeQuote(); 
 
setInterval(changeQuote, 10000);

body { 
 
    font-weight: 600; 
 
    font-size: 40px; 
 
} 
 
.text { 
 
    position: relative; 
 
} 
 
.quote { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 
.letter { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
    -webkit-transform: translateZ(25px); 
 
      transform: translateZ(25px); 
 
    -webkit-transform-origin: 50% 50% 25px; 
 
      transform-origin: 50% 50% 25px; 
 
} 
 
.letter.out { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s 0.7s, opacity 0.7s linear; 
 
} 
 
.letter.behind { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.letter.in { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: opacity 0.7s linear; 
 
}

<body> 
 
<div class="text"> 
 
    <p> 
 
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span> 
 
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span> 
 
    </p> 
 
    
 
</div>

來源

2016-01-23 Vasilis

你setInterval(changeQuote, 5000)是你巧妙地開發整理短期效果的來源。最初，我開始玩5000ms，並將其改爲15000ms，降低到8000〜10000ms左右，這似乎使其效果最好。

將其更改爲setInterval(changeQuote, 9000)並查看區別。

但是，考慮到可伸縮性，您需要找出一種方法使setInterval等到quoteArray完成推送字母。

編輯

基於註釋中的反饋，我決定如下：

對事物的JavaScript端，每個字母是<span>這意味着每個充當一個單獨的元素。缺乏的是創造一個詞來環繞每個句子。這將確保每個單詞根據其父容器進行環繞。

在CSS方面，容器的字母意思是quote需要樣式，這樣可以更好地表示其內容。通過添加white-space: nowrap,display: block我設法給它的孩子一個容器，它將根據屏幕寬度進行調整。

請參閱下面的代碼修復從提供的供參考。

var quotes = document.getElementsByClassName('quote'), 
 
    quoteArray = [], 
 
    currentQuote = 0; 
 

 
quotes[currentQuote].style.opacity = 0; 
 

 
for (var i = 0; i < quotes.length; i++) { 
 
    splitLetters(quotes[i]); 
 
} 
 

 
function changeQuote() { 
 
    var cw = quoteArray[currentQuote]; 
 
    var nw = currentQuote == quotes.length - 1 ? quoteArray[0] : quoteArray[currentQuote + 1]; 
 
    for (var i = 0; i < cw.length; i++) { 
 
    animateLetterOut(cw, i); 
 
    } 
 
    for (var i = 0; i < nw.length; i++) { 
 
    nw[i].className = 'letter behind'; 
 
    nw[0].parentElement.style.opacity = 1; 
 
    animateLetterIn(nw, i); 
 
    } 
 

 
    currentQuote = (currentQuote == quoteArray.length - 1) ? 0 : currentQuote + 1; 
 
} 
 

 
function animateLetterOut(cw, i) { 
 
    setTimeout(function() { 
 
    cw[i].className = 'letter out'; 
 
    }, 0); 
 
} 
 

 
function animateLetterIn(nw, i) { 
 
    setTimeout(function() { 
 
    nw[i].className = 'letter in'; 
 
    }, 340 + (i * 30)); 
 
} 
 

 
function splitLetters(quote) { 
 
    var content = quote.innerHTML, 
 
    \t \t words = [], 
 
     word = document.createElement('span'); 
 
    
 
    word.className = "word"; 
 
    word.innerHTML = ""; 
 
    quote.innerHTML = ""; 
 
    
 
    for (var i = 0; i < content.length; i++) { 
 
    var letter = document.createElement('span'); 
 
    letter.className = 'letter'; 
 
    
 
    if(content.charAt(i) !== " "){ 
 
    \t letter.innerHTML = content.charAt(i); 
 
     word.innerHTML = word.innerHTML.concat(letter.innerHTML); 
 
    } 
 
    else { 
 
    \t letter.innerHTML = "&nbsp"; 
 
     word.innerHTML = word.innerHTML.concat(letter.innerHTML); 
 
     quote.appendChild(word); 
 
     words.push(word); 
 
     word = document.createElement('span'); 
 
     word.className = "word"; 
 
    } 
 
    } 
 

 
    quoteArray.push(words); 
 
} 
 
changeQuote(); 
 
setInterval(changeQuote, 10000);

body { 
 
    font-weight: 600; 
 
    font-size: 40px; 
 
} 
 

 
.text { 
 
    position: relative; 
 
} 
 

 
.quote { 
 
    position: absolute; 
 
    display: block; 
 
    opacity: 0; 
 
    white-space: nowrap; 
 
} 
 

 
.letter { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
    -webkit-transform: translateZ(25px); 
 
    transform: translateZ(25px); 
 
    -webkit-transform-origin: 50% 50% 25px; 
 
    transform-origin: 50% 50% 25px; 
 
} 
 

 
.letter.out { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s 0.7s, opacity 0.7s linear; 
 
} 
 

 
.letter.behind { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 

 
.letter.in { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: opacity 0.7s linear; 
 
}

<div class="text"> 
 
    <p> 
 
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span> 
 
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span> 
 
    </p> 
 
</div>

來源

2016-01-23 17:22:00 AGE

哦，對不起！我不是在說這個。在我的代碼中，我實際上就像你說的那樣。但是當試圖減少我的代碼在這裏發佈時，我用5000代替了它。無論如何，這個問題問'我怎樣才能避免分詞？'。正如你所看到的，有些情況下，一行字的一些字母顯示在上面的行中，而其餘的行顯示在下面的行中（兩行之間的字分割）。這是我想解決的實際問題 – Vasilis

哦，我看到謝謝！我很困惑，我會看看這個，看看我能爲你做些什麼:) – AGE

@Vasilis我編輯了我的代碼，看看讓我知道如果你有任何問題 – AGE

避免單詞分裂

回答

編輯

相關問題