更改CSS溢出隐藏行为

所以，我在jQuery中做了一个简单的动画进度条。 you can view it here.更改CSS溢出隐藏行为

我需要在这篇文章中的一些代码，所以这里是我的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，让元素隐藏“顺利”？

来源

2013-11-26 amagumori

一件事说大，有没有需要有'显示：inline-block;'和'float：left;'在同一个元素上。除非有什么理由呢？ –

@JoshPowell过去我曾多次看过相同的东西。如果这是故意完成的，那可能是因为IE7不支持内联块，因此它可能作为后备？只是一个猜测，但我不知道它是否支持浮动.. –

@JoshC嗯，这是值得研究。我不是一个支持IE7的人，但如果我需要的话，记住这是一件好事。 –

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宽度大于你所需要的（文字，箭头，酒吧）

来源

2013-11-26 19:56:16

这实际上摆脱了箭头混乱，这使得它更好。 – gotohales

这也是一个很好的解决方案。感谢 – amagumori

这实际上最终成为了我的一个更好的解决方案，由于上述箭头混乱与joshC的实现。谢谢。 – amagumori

您正在寻找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; 
}

来源

2013-11-26 19:53:43

经验总是计数:) – thenewseattle

@JoshC这很酷，我没有想到白色空间预，可以... – PSL

是的，这是一个非常酷的解决方案。谢谢！我不知道白色空间属性。 – amagumori

更改CSS溢出隐藏行为

回答

相关问题