Question

我正在使用另一个Stackoverflow post的JavaScript示例来旋转位于span内的h3的文本。我不明白为什么文本明显更长，但只是一个单词，保持在一行，但文本更短但有两个单词去两行？

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

要解决此问题，您可以添加from graphics import GraphicsWindow win = GraphicsWindow(400,400) canvas = win.canvas() for j in range(10, 90, 10): for j in range(10, 90, 20): if j % 2 == 1: for i in 10, 30, 50, 70: canvas.setFill("black") canvas.drawRect(i, j, 10, 10) else: for i in 20, 40, 60, 80: canvas.setFill("white") canvas.drawRect(i, j, 10, 10)

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这样的数字是偶然的。把那些适合你的东西放在那里。）

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

2 个答案: