Question

我想使用文本溢出：省略号来删除一些文本太久，但是当我使用溢出时我遇到了一些问题：隐藏了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溢出时，.text元素和.bottom元素之间存在2px空白的原因：隐藏属性
为什么.right elment在溢出时不与左对齐：隐藏属性
溢出的剂量：隐藏真的

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

相关：Why is this inline-block element pushed downward?

真正的原因是：

＆＃39;内联块的基线＆＃39;是正常流程中其最后一个行框的基线，除非它没有流入的行框或者它的溢出＆＃39; property具有除＆＃39; visible＆＃39;之外的计算值，在这种情况下，基线是底边距边缘。

感谢所有

的帮助

Answer 1

回答您的问题如下。

当.text溢出时，.text元素和.bottom元素之间存在2px空白的原因：隐藏属性

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

<强>代码

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

}

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

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

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

溢出的剂量：隐藏真的

此值表示内容已剪裁且无滚动应提供机制来查看剪辑外的内容区域;用户无权访问剪辑内容。大小和剪辑区域的形状由“剪辑”属性指定。

Source

希望这有帮助。

Answer 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;
}

css overflow：隐藏显示：inline-block

2 个答案: