爲什麼「溢出」屬性給出不同的結果？

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*/ 
}