我想在文字过长时使用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属性时,它与左侧不对齐
- overflow:hidden到底起什么作用
我的问题不是如何修复它,而是找出发生了什么
相关:Why is this inline-block element pushed downward?
真正的原因是:
'inline-block'的基线是其在正常流中的最后一行框的基线,除非它没有流动的行框或者其'overflow'属性的计算值不是'visible',此时基线是底部边缘。
感谢所有人的帮助
$(this).toggleClass('overflow');
。 - Patrick Evansvertical-align
属性来补充.overflow
以解决这个问题。我已经更新了答案。 - Nitesh