jQuery文本旋轉/填充適用於單個單詞但不適用雙字

我正在使用另一個Stackoverflow post的JavaScript示例來旋轉位於h3內的span的文本。我不明白爲什麼顯着更長，但是是一個單詞的文本停留在一行上，但短得多但有兩個單詞的文本會變成兩行？jQuery文本旋轉/填充適用於單個單詞但不適用雙字

var arr = ['signficantly_longtext_than_others', 'Data Science', 'Front-End Development', 'Programming', 'Product Management', 'Digital Marketing', 'Mobile Development', 'Web Design'], 
    i = 0, // Start Index 
    len = arr.length, 
    $el = $('.rotate span'), 
    $temp = $('<span />'); // Helper - Will measure Text width 
    console.log($temp) 
$temp.hide().appendTo($el.parent()); // Setup Helper 

(function loop() { 
    console.log(arr[i%=len]) 
    var w = $temp.text(arr[i%=len]).width(); // set text + get width 
    console.log(w); 
    $el.fadeTo(600,0).animate({width: w}, 600, function(){ 
    $(this).text(arr[i++]).fadeTo(600, 1); 
    }); 
    setTimeout(loop, 3000); 
}());

查看直播：http://codepen.io/maudulus/pen/RWRMwj

來源

2015-09-21 maudulus

如果使用' '而不是空格會發生什麼？ –

@DavidKnipe我沒有看到任何區別。 – maudulus

不要緊，然後只是一個想法。 –

要解決問題，您可以添加white-space: nowrap;

h3 { 
    padding-top:20px; 
    margin-top:0; 
    font-weight: 800; 
    font-size: 26px; 
    white-space: nowrap; 
}

http://codepen.io/anon/pen/RWRMVy

來源

2015-09-21 21:00:49 Jack

任何想法如何在轉換之前阻止整個事件的發生？ – maudulus

這似乎是'animate'調用的一個問題。一個快速修復似乎是從流中刪除元素，所以它不會影響佈局（如：http://codepen.io/anon/pen/ojLqdE） - 我很好奇的一件事是爲什麼你需要計算寬度？ – Jack

這是因爲容器的寬度。

更改CSS來是這樣的：

h3 { 
    padding-top:20px; 
    margin-top:0; 
    font-weight: 800; 
    font-size: 26px; 
    width: 7000px; 
} 
span { 
    width: 6000px; 
}

演示： http://codepen.io/anon/pen/vNKRgd

（。當然，數字像6000px與7000px隨意取放有什麼適合你）

來源

2015-09-21 20:57:29 Shultc

jQuery文本旋轉/填充適用於單個單詞但不適用雙字

回答

相關問題