CSS overflow:hidden与display:inline-block的结合使用

Question

CSS overflow:hidden与display:inline-block的结合使用

5

我可以帮您进行翻译。以下是翻译的结果，保留了html标签：

我想在文字过长时使用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'，此时基线是底部边缘。

感谢所有人的帮助

- super-xp

2个回答

0

你需要为两个元素使用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;
}

- Ganesh Yadav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nitesh · Accepted Answer

以下是您的问题的答案。

为什么在.text元素具有overflow:hidden属性时，.text元素和.bottom元素之间会有2px的空白

A > 您需要添加vertical-align属性来对齐元素，以消除间隙。链接：With Vertical Align

代码

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

}

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

当使用 overflow:hidden 属性时，为什么 .right 元素不能与左侧对齐

对齐与溢出无关。您需要使用 vertical-alignment 根据需要进行对齐。我还相信，这与问题1有关。因此，如果您检查上面的内容，它现在已经对齐了。

overflow:hidden 究竟是做什么的

这个值表示内容被剪切，不应提供滚动机制来查看剪切区域外的内容；用户将无法访问剪切的内容。剪辑区域的大小和形状由 'clip' 属性指定。

来源

希望这可以帮助您。