"오버플로"속성이 다른 결과를주는 이유는 무엇입니까?

Question

첫 번째 div (오버플로 숨김)의 제목이 두 번째 div (nooverflow)의 제목과 같은 세로 위치에 있지 않습니다.

jsfiddle 링크

은 다음과 같습니다 :

.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;을 가지고 있지 않았다

는

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가입니다. 당신은 당신이 .content 클래스를 설정하면 하나의 #overflowhidden의 ID와이 줄 #overflowhidden {overflow: hidden;}

와 모두 동일 그것을 작동합니다해야 당신의 CSS를했다. 둘 다 똑같은 결과를 원했어?

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