changing CSS overflow hidden behavior

Question

so, i made a simple animated progress bar in jQuery. you can view it here.

I need some code in this post, so here's my 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;
}

my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?

Answer 1

Altenatively to JoshC's answer,

you could wrap it in a container like 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 */
}

Just make sure that the .progess width is larger than what you need (text, arrow, and bar)

Answer 2

You are looking for white-space: pre.

Here is an updated example - it works how you want it to now.

.filename {
    white-space: pre;
}

EDIT

If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:

jsFiddle example - less HTML now, since the arrow is a pseudo element.

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;
}