jPlayerプログレスバーのdivのオーバーラップ

Question

クライアントのjPlayerを使用しています。プログレスバーはトラックのタイトルです。トラックの進行に合わせて色が変わります。私は1つの色でタイトルを持つdivを持つことによってこれを達成しています、そして絶対に他の色のタイトルで、その上に進行状況バーを配置します。プログレスバーが拡大すると、新しい色のテキストが表示されます。

http://sublimio.matthew-ferry.com/sublimio/

：ケースで私の説明がひどいです（私はそれがあると確信している）、あなたはここでのdevのサイトを見てみることができますご覧のように、進捗状況は単語のタイトルでうまくいきます。しかし、複数の単語のタイトルでは、最初の単語は罰金を示し、その後の単語については、単語全体が終了するまで表示されません。

これはブラウザのレンダリングに問題がありますか、これを修正するためにできることはありますか？

最初JS：

$('.track').each(
     function() 
     { 
      var player_id = '#' + $('.jp-jplayer', this).attr('id'); 
      var audio_id = '#' + $('.jp-audio', this).attr('id'); 

      $('.jp-jplayer', this).jPlayer(
       { 
        "cssSelectorAncestor": audio_id, 
        swfPath: "js", 
        supplied: "mp3", 
        wmode:"window" 


      } 
      ); 

      $('.song', this).click(
       function(eve) 
       { 
        eve.preventDefault(); 
        $(this).jPlayer("progress"); 
        $('.jp-jplayer').jPlayer("stop"); 
        $(player_id).jPlayer(
         "setMedia", 
         { 
          mp3: $(this).attr("href") 
         } 
        ); 

        $(player_id).jPlayer("play"); 
        return false; 
       } 
      ); 
     } 
    ); 

今（簡体字）HTML：

<ul> 
<li class="track"> 
    <div> 
     <div class="jp-controls"> 
      <span><a class="jp-play song" tabindex="1">play</a></span> 
      <span><a class="jp-pause" tabindex="1">pause</a></span> 
     </div> 
     <div class="title">Title With Multiple Words</div> 
     <div class="progress"> 
      <div class="jp-seek-bar"> 
       <div class="jp-play-bar">Title With Multiple Words</div> 
      </div> 
     </div> 
    </div> 
</li> 
...etc... 
</ul> 

Answer 1

Haが、それを考え出しました。 0％幅のプログレスバーは、オーバーフローテキストを複数の行に折り返していました。プログレスバーのテキストにwhite-space: nowrap;を使用して修正しました