css溢出︰隐藏与显示：内嵌块

我想使用文本溢出：省略号来削减一些文本，当它太长，但我有一些问题，当我使用溢出：隐藏与显示：内联块。css溢出︰隐藏与显示：内嵌块

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/

我的问题是：

为什么有2px的元素的.text和.bottom元素之间的空白时的.text具有溢出：隐藏属性
为什么.right elment不与对齐离开的时候它有溢出：隐藏属性
什么剂量溢出：隐藏真正做到

我的问题不在于如何解决它，但FIGUR Ë出了什么事

的真正原因是：

的“inline-block的”的基础是它的最后一行箱的正常流量基线，除非它没有流入线框或者其“溢出”属性具有除“可见”以外的计算值，在这种情况下，基线是底部边缘边缘。

谢谢所有

来源

2015-05-12 super-xp

回答您的问题如下的帮助。

为什么会出现的.text元素和.bottom元素之间的2px空当的.text具有溢出：隐藏属性

A>您需要添加一个vertical-align属性来对齐元素，看到没有开口屄。链接With Vertical Align

代码

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

}

PS：您可以更改vertical-align:top;任何其他vertical-align性质按您的需求。

为什么。当它溢出时，右边的元素不与左边对齐：隐藏属性

A>对齐与溢出无关。您需要使用vertical-alignment根据需要对齐。我也相信，这与问题1有关联。因此，如果您检查上述内容，它现在会一致。

什么剂量溢出：隐藏真正做到

该值指示内容被剪切，并且没有滚动机制应提供查看剪辑区域外的内容;用户将无法访问剪辑的内容。剪辑区域的大小和形状由'clip'属性指定。

Source

希望这有助于。

来源

2015-05-12 06:00:56 Nitesh

溢出：隐藏在的onclick，'$（本）.toggleClass（ '溢出'）被切换为的.text;' –

@PatrickEvans - 我的道歉。 '.overflow'应该用一个'vertical-align'属性来解决这个问题。我已经更新了答案。 – Nitesh

抱歉这么晚回复。默认的垂直对齐值是基线，我知道vertical-align：top可以解决它，但为什么？默认值基线在溢出之前工作正常：隐藏已添加，所以，我真正的问题是溢出时发生了什么：hidden是否被添加，是否会损害inline-box模型？ –

你需要使用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; 
}

来源

2015-05-12 06:22:25 locateganesh

css溢出︰隐藏与显示：内嵌块

回答

相关问题