IEの2行目で「テキストオーバーフロー：省略記号」が正しく機能しない

Question

フルネームを表示するための制限エリア（width: 200px）があります。私は、このようなhtmlの建設に固執する必要があります（DIV内の2つのスパン）：

.fullName { 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="fullName"> 
 
    <span class="firstName"> 
 
    AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert 
 
    </span> 
 
    <span class="lastName"> 
 
    EinsteinEinsteinEinsteinEinsteinEinsteinEinstein 
 
    </span> 
 
</div>

期待される動作：

1. 姓と名が長すぎるされていない - 表示されるべき一行で
2. 姓と名が十分に長い（ただし、それぞれ200 px未満） - 2行で表示する必要があります。
3. 名前のうち1つが200ピクセル未満で、残りの1つが200ピクセル未満です。
4. は、両方の名前が複数200pxのそれぞれを取る最も長い名前を持つ行の最後で... -sign持つ行は - ラインの終わりに... -signsと2行で表示されなければならない
ますよう

上記のコードがChromeとFirefoxのすべての期待を満たしていることがわかります。しかし、それはIEで正しく動作しません - それはちょうど... -signを追加せずに2行目をトリミングします。

純粋なCSSソリューションが好ましい私はJSソリューションを持っていますが、私のチームは少し問題を吸う純粋なCSSソリューションを主張しています。

、デフォルトで<span>ありdisplay:inline： -

Answer 1

は、ボックスを確立しなければならない要素を動作させるためtext-overflow: ellipsis;のいずれかdisplay:blockまたはdisplay:inline-block、これを試してみてくださいことができます。 `ディスプレイと

.fullName {border: 1px solid blue; width:50%} 
 

 
.fullName > span { 
 
    max-width:100%; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    display: inline-block; 
 
}

<div class="fullName"> 
 
    <span class="firstName"> 
 
    AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert 
 
    </span> 
 
    <span class="lastName"> 
 
    EinsteinEinsteinEinsteinEinsteinEinsteinEinstein 
 
    </span> 
 
</div>