为什么“溢出”属性给出不同的结果？

Question

第一个div（overflowhidden）中的标题与第二个div中的标题（nooverflow）不在同一个垂直位置。

的的jsfiddle链接如下：

jsfiddle link

的HTML是

<div class="line"> 
    <span class="attr">title :</span> 
    <span id="overflowhidden" class="content"> this is long content</span> 
</div> 

<div class="line"> 
    <span class="attr">title :</span> 
    <span id = "nooverflow" class="content"> this is long content</span> 
</div> 

的CSS是：

.line { 
    height: 30px; 
    width: 200px; 
    outline: 1px dashed; 
} 

.attr { 
    position: relative; 
    width: 30px; 
} 

.content { 
    position: relative; 
    display: inline-block; 
    left: 40px; 
    width: 100px; 
    height: 20px; 
    line-height: 20px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    border-radius: 15px; 
    border: 1px solid greenyellow; 
} 

#overflowhidden { 
    overflow: hidden; 
} 

Answer 1

您没有在两个overflow: hidden;。你说在你的CSS只有一个与编号#overflowhidden应该有这条​​线#overflowhidden {overflow: hidden;}

如果您将其设置在.content类是工程相同的两个。你想得到同样的结果吗？

DEMO

.content { 
    position: relative; 
    display: inline-block; 
    left:40px; 
    width:100px; 
    height: 20px; 
    line-height: 20px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    border-radius: 15px; 
    border:1px solid greenyellow; 
    overflow:hidden; /*you set it on the class for both to have*/ 
}