인라인 블록을 사용하여 스팬 브레이크에서 텍스트를 자르십시오. UI

Question

텍스트를 자르고 싶습니다. 요소의 정렬을 유지해야합니다. 스팬의 텍스트를 자르려면 display: inline-block을 사용해야합니다. 하지만이를 사용하면 UI가 손상됩니다.

JSFiddle Demo

코드 조각

HTML

.inline { 
    max-width: 137px !important; 
    text-overflow: ellipsis; 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
} 

예상 출력이 잘린 텍스트가 주변 <i></i> 태그로 정렬하는 것입니다

<a href="#"> 
<i class="fa fa-circle bordered"></i> 
<span class="bordered inline">{{text}}</span> 
<i class="fa fa-times bordered"></i> 
</a> 

CSS.

Answer 1

@Fran이 제안한대로 vertical-align: top을 추가하면 문제가 해결됩니다.

.inline { 
    max-width: 137px !important; 
    text-overflow: ellipsis; 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    vertical-align: top; 
} 

이 예제는 JSFiddle Demo에서 볼 수 있습니다. vertical-align: top을 추가한다고해도 세 번째 예와 같이 요소가 실제로 정렬되지 않습니다. 그러나 그것은 지금 가장 가까운 대답입니다.