制作< span>元素内联块和溢出：隐藏将取代他？ [英] Making a <span> element inline-block and overflow: hidden will displace him?
问题描述
请使用任何浏览器并观看这个试图代表我正在建立的新网站上使用的结构的小提琴（将鼠标悬停在hello文本上）：
正如你所看到的，我正在尝试动画扩展一些文本，出现在< li> 。我认为我应该能够使秘密文本没有宽度（不可见），然后非常直接地将宽度设置为全角动画（在这个简单的例子中，我使用了固定宽度，因为不能动画为auto ）。
问题是内联元素不关心提供的宽度，所以我必须让他显示为 inline-block 。这样做会使元素宽度为0像素。但是，文字仍然显示。所以我还必须应用CSS规则 overflow：hidden 。但隐藏溢出引发了另一个问题，我无法解释：
span元素被取代。文字世界偏移到顶部，看起来像一些愚蠢的上标。
我可以丑陋地将span元素更多地加入到这个小提琴中：
但是，正如您所看到的，现在我们在句子结尾处的点不存在问题。
如果您知道为什么发生了这个问题（它与span inline- block 有关？）以及如何解决的问题将会超级棒！
出现在第10节底部的CSS 2.1规范：
'inline-block'的基线是正常流程中最后一行的基线
，除非它没有任何流入线框，或者
其'overflow'属性的计算值不是'visible'，而是
，这种情况下基线是底部边缘边缘。
规范说明为什么不明确的根本原因，但它可能与实现溢出设置的难度有关。
您的方案中最简单的修复方法就是将所有三个跨度从基线中移除。文本的高度相同，所以 vertical-align：top ， vertical-align：middle 和 vertical-align bottom 都会有效果。
例如 li span {vertical-align：top; }
请参阅 http： //jsfiddle.net/3A6fC/5/
Please use any browser and have a look at this fiddle that is trying to represent the structure I am currently using on a new website I'm building (hover your mouse over the "hello" text!):
As you can see, I am trying to animate the expansion of some text, occuring on the inside of a <li>. I figure that I should be able to make the secret text have no width (be invisible), and then quite straight forwardly animate the width to full width (in this simple example, I use a fixed width as one can not animate to "auto").
Problem is that inline elements do not care about a provided width, so I have to make him be displayed as inline-block. Doing so will give the element 0 pixels width. However, the text is still shown. So I must also apply the CSS rule overflow: hidden. But hiding the overflow introduces yet another problem, the one I can not explain: The span element is displaced. The text "world" is offset to the top and looks like some dumb superscript.
I can ugly hack the span element a bit more, into this fiddle:
But as you can see, now we have a problem with the dots at the end of the sentence not moving along..
If you know why this problem has occured (it gotta have something to do with the span being inline-block?) and how to fix the problem would be super awesome!
The direct answer to why it happens is from this paragraph in the CSS 2.1 spec which appears at the very bottom of Section 10:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
The underlying reason as to why the spec says that is unclear, but it may have something to do with the difficulties in implementing overflow settings other than visible.
The simplest fix in your scenario is just to take all three spans off the baseline. The text is all the same height, so vertical-align:top, vertical-align:middle and vertical-align bottom will all do the trick.
e.g. li span { vertical-align:top; }
see http://jsfiddle.net/3A6fC/5/
这篇关于制作< span>元素内联块和溢出：隐藏将取代他？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
