CSSオーバーフローの隠し動作を変更する

Question

jQueryで単純なアニメーション進行状況バーを作成しました。 you can view it here.

が、私はこの記事では、いくつかのコードが必要ですので、ここで私のCSSです：

.progress { 
    height: 14px; 
    width: 300px; 
    background: #111; 
    border-radius: 5px; 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    color: white;   
} 

.filename { 
    font-size: 10px; 
    color: white; 
    position: relative; 
} 

.progresstop { 
    padding: 4px; 
    width: 40px; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    height: 8px; 
    float: left; 
    background: #c44639; 
    vertical-align: middle; 
    display: inline-block; 
} 

.arrow-right { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    background: #111; 
    border-width: 7px 7px 7px ; 
    border-color: transparent transparent transparent #c44639; 
    float: left; 
    display: inline-block; 
} 

私の質問：プログレスバーが最後に到達したとして、存在のうちの要素「ポップ」は、彼らはdiv要素をオーバーフローする場合とdivから完全に外れるまで表示されずに非表示になります。具体的には、CSSの矢印が終わりに達すると消えるので、プログレスバーの終わりは三角形から実際に視覚的にかわいい線に変わります。要素が「スムーズに」隠れるように、CSSやjQueryのいずれかでこの動作を変更する方法はありますか？

Answer 1

Altenatively JoshCの答え、

にあなたはthis fiddle

HTML

状の容器でそれをラップすることができ

<div id="progress-container"> 
    <div class='progress'> 
     <div class='progresstop'></div> 
     <div class='arrow-right'></div> 
     <div class='filename'>FILENAME</div> 
    </div> 
</div> 

CSS

#progress-container { 
    height: 14px; 
    width: 300px; 
    background: #111; 
    border-radius: 5px; 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    color: white; 
} 

.progress { 
    height: 14px; 
    width: 500px; /* large value */ 
} 

ちょうど言及する

Answer 2

あなたはwhite-space: preを探しています。

Here is an updated example - これは今のところうまくいきます。

.filename { 
    white-space: pre; 
} 

EDIT

あなたは（矢印が新しい行にジャンプ）アニメーションの最後でグリッチを削除したい場合は、次のマークアップ/ CSSを使用します。

jsFiddle exampleを - 少ないです矢印は擬似要素であるため、HTMLを使用します。

HTML

<div class='progress'> 
    <div class='progresstop'></div> 
    <div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */ 
    <div class='filename'>FILENAME</div> 
</div> 

CSS

.filename:before { 
    content:"\A"; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 7px 7px 7px; 
    border-color: transparent transparent transparent #c44639; 
    position:absolute; 
}