thay đổi hành vi ẩn CSS tràn

Question

vì vậy, tôi đã tạo thanh tiến trình hoạt hình đơn giản trong jQuery. you can view it here.

Tôi cần một số mã trong bài viết này, vì vậy đây là CSS của tôi:

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

câu hỏi của tôi: như thanh tiến trình đạt đến cuối cùng, các yếu tố "pop" ra khỏi sự tồn tại khi họ tràn div và được ẩn, thay vì ở trạng thái hiển thị cho đến khi chúng hoàn toàn nằm ngoài div. cụ thể, khi mũi tên CSS biến mất khi nó đến cuối, kết thúc của thanh tiến trình thay đổi từ một tam giác thành một đường thẳng, điều này thực sự là chói tai trực quan. là có cách nào để thay đổi hành vi này, hoặc trong CSS hoặc jQuery, để có các yếu tố ẩn "trơn tru"?

Answer 1

Altenatively để trả lời JoshC của,

bạn có thể bọc nó trong một container như 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 */ 
} 

Chỉ cần chắc chắn rằng chiều rộng .progess lớn hơn những gì bạn cần (văn bản, mũi tên, và thanh)

Answer 2

Bạn đang tìm kiếm white-space: pre.

Here is an updated example - nó hoạt động như thế nào bạn muốn nó ngay bây giờ.

.filename { 
    white-space: pre; 
} 

EDIT

Nếu bạn muốn loại bỏ các trục trặc ở phần cuối của phim hoạt hình (nơi mũi tên nhảy đến một dòng sản phẩm mới), sử dụng đánh dấu sau/CSS:

jsFiddle example - ít HTML bây giờ, vì mũi tên là một phần tử giả.

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