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

Question

我正在使用另一個Stackoverflow 帖子的 JavaScript 示例來旋轉位於h3內的span的文本。 我不明白為什么明顯更長但只有一個詞的文本會保留在一行，而較短但有兩個詞的文本會變成兩行？

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

Answer 1

為了解決這個問題，你可以添加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

Answer 2

這是因為容器寬度。

將 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 這樣的數字是隨意取的。放一些適合你的東西。）