css 溢出：隐藏，显示：inline-block答案

【问题标题】：css overflow:hidden with display:inline-blockcss 溢出：隐藏，显示：inline-block
【发布时间】：2015-05-13 16:07:02
【问题描述】：

我想使用 text-overflow: ellipsis 来剪切一些太长的文本，但是我在使用 overflow:hidden 和 display:inline-block 时遇到了一些问题。

html:

<span class="text">
    <span class="inner left">Click to add overflow</span>
    <span class="inner right"> long text here</span>
</span>
<div class="bottom"></div>

css:

.text {
    line-height: 50px;
    font-size: 20px;
    display: inline-block;
}
.right {
    display:inline-block;
    text-overflow: ellipsis;
    width: 100px;
    white-space: nowrap;
}
.overflow {
    overflow: hidden;
}

javascript：

$('.text').on('click', function() {
    $(this).toggleClass('overflow');
    $('.right').toggleClass('overflow');
})

jsfiddle: http://jsfiddle.net/zhouxiaoping/knw7m5k2/2/

我的问题是：

当.text 有overflow:hidden 属性时，为什么.text 元素和.bottom 元素之间有2px 空白
为什么 .right 元素在溢出时不与左侧对齐：隐藏属性
overflow:hidden 的作用是什么

我的问题不是如何解决它，而是弄清楚发生了什么

真正的原因是：

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流入行框，或者它的 'overflow' 属性具有除 'visible 之外的计算值'，在这种情况下，基线是底部边距边缘。

感谢大家的帮助

【问题讨论】：

标签： jquery html css

【解决方案1】：

回答您的问题如下。

为什么 .text 元素和 .bottom 元素之间有 2px 空白，而 .text 具有溢出：隐藏属性

A > 您需要添加一个vertical-align 属性来对齐元素以查看没有间隙。链接With Vertical Align

代码

.overflow {
overflow: hidden;
vertical-align: top;

}

PS：您可以根据需要将vertical-align:top; 更改为任何其他vertical-align 属性。

为什么 .right 元素在溢出时不与左侧对齐：隐藏属性

A > 对齐与溢出无关。您需要使用vertical-alignment 根据需要对齐它。我也相信，这有一个问题 1 的链接。所以如果你检查上面的内容，它现在是对齐的。

溢出：隐藏的真正作用是什么

该值表示内容被剪裁并且不滚动应该提供机制来查看剪辑之外的内容地区;用户将无权访问剪辑的内容。尺寸和剪辑区域的形状由 'clip' 属性指定。

Source

希望这会有所帮助。

【讨论】：

溢出：隐藏在 onclick 中被切换为 .text，$(this).toggleClass('overflow');
@PatrickEvans - 我很抱歉。 .overflow 应该补充一个 vertical-align 属性来解决这个问题。我已经更新了答案。
抱歉这么晚才回复。默认的垂直对齐值是基线，我知道垂直对齐：顶部可以解决它，但是为什么呢？在添加 overflow:hidden 之前，默认值基线工作正常，所以，我真正的问题是添加 overflow:hidden 时发生了什么，它会损坏内联框模型吗？
不用担心@super-xp。仅供参考阅读此code.google.com/p/chromium/issues/detail?id=176244 它的 chrome 规范已将此作为一个问题。由于它不理解它，因此您需要显式添加具有 top 值的 vertical-align 属性以使其工作，因为它不会像实际应该那样读取 baseline。希望这会有所帮助。

【解决方案2】：

你需要使用 float:left;对于两个跨度。之后进行一些调整，如行高、边距。找到fiddle demo

.left {
font-size: 12px;
font-weight: bold;
float:left;
line-height:55px;
}
.right {
margin-left:4px;    
float:left;
text-overflow: ellipsis;
width: 100px;
white-space: nowrap;
}

【讨论】：