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 */ 
} 

,`디스플레이를 위해 .progess 폭이 당신이 언급하는 (텍스트, 화살표, 바)

Answer 2

당신은 white-space: pre을 찾고 있습니다.

Here is an updated example - 이제 원하는대로 작동합니다.

.filename { 
    white-space: pre; 
} 

편집

당신이 (화살표 새로운 라인으로 이동) 애니메이션의 끝에서 결함을 제거하려면, 다음과 같은 마크 업/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; 
}