jQuery 文本旋转/填充适用于单字，但不适用于双字答案

【问题标题】：jQuery text rotation/ filling works for single words but not double wordsjQuery 文本旋转/填充适用于单字，但不适用于双字
【发布时间】：2015-09-22 05:00:49
【问题描述】：

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

【问题讨论】：

如果使用&nbsp; 代替空格会怎样？
@DavidKnipe 我看不出有什么不同。
没关系，只是一个想法。

标签： javascript jquery html css

【解决方案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

【讨论】：

知道如何在过渡前阻止整个事情发生一秒钟吗？
animate 调用似乎有问题。一个快速修复似乎是从流中删除元素，因此它不会影响布局（例如：codepen.io/anon/pen/ojLqdE） - 我很好奇的一件事是为什么你需要计算宽度？

【解决方案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 这样的数字是随意取的。放一些适合你的东西。）

【讨论】：