javascript - jQuery 文本旋转/填充适用于单个词，但不适用于双词

Question

我正在使用另一个 Stackoverflow post的 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