インラインブロックを使用してスパンブレイク内のテキストを切り捨てるUI

Question

テキストを切り捨てて、要素の配置を保持する必要があります。スパン内のテキストを切り捨てるには、display: inline-blockを使用する必要があります。しかしそれを使用するとUIが壊れます。

JSFiddle Demo

コードスニペット

HTML

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

CSS

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

予想される出力は切り捨てられ、テキストが周囲の<i></i>タグと一致することです。

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を追加しても、3番目の例のような要素は実際には整列しません。しかし、それは今のところ最も近い答えです。