改变 CSS 溢出隐藏行为答案

【问题标题】：changing CSS overflow hidden behavior改变 CSS 溢出隐藏行为
【发布时间】：2013-11-26 19:50:47
【问题描述】：

所以，我在 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 中，让元素“平滑”隐藏？

【问题讨论】：

有一点需要提一下，display: inline-block; 和 float: left; 不需要在同一个元素上。除非有什么原因？
@JoshPowell 我过去多次看到过同样的事情。如果是故意这样做的，可能是因为 IE7 不支持 inline-block，因此它可以作为后备？只是一个猜测，虽然我不知道它是否也支持浮点数..
@JoshC 嗯，值得研究。我不是支持 IE7 的人，但如果我必须要记住这将是一件好事。
没有理由，只是我对 Web 开发还很陌生，所以我的 css 开发理念基本上是“在不完全了解它们的作用的情况下添加属性，直到看起来正确为止”。哈哈。

标签： javascript jquery html css

【解决方案1】：

替代 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 的宽度大于您需要的宽度（文本、箭头和条形）

【讨论】：

这实际上摆脱了箭头混蛋，这使它变得更好。
这实际上对我来说是一个更好的解决方案，因为前面提到的 joshC 实现的箭头混蛋。谢谢。

【解决方案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;
}

【讨论】：

经验总是很重要:)
是的，这是一个非常酷的解决方案。谢谢你！我不知道 white-space 属性。