html - CSS 複数のテキスト部分の整列

Question

3 つのテキスト部分を揃えようとしています。中央部分には最大幅があり、text-overflow:ellipsis プロパティを使用して切り詰めることができます。

例 サイト | www.aLongNameShouldBeTruncated.com | 開いています

次のように配置する必要があります。

クロムで動作させることができます。 http://jsfiddle.net/LSuRx/5/を参照してください。

しかし、IE9 と FireFox では、3 つの部分を縦にうまく並べることができません。

これを解決する方法を知っている人はいますか？

Answer 1

これは私のために働く：

<style type="text/css"> 
div.ord{
    white-space: nowrap;  
    overflow: hidden; 
    float: left;
}

div.elip{
    max-width: 100px;
    text-overflow: ellipsis;
}
</style>

<div class="ord">Text 1</div>
<div class="ord elip">Your long address text will be here</div>
<div class="ord">Text 2</div>

Answer 2

に vertical -align:topを指定しますspan。次のように書きます。

span{vertical-align:top;}

これをチェックしてくださいhttp://jsfiddle.net/LSuRx/7/

Answer 3

vertical-align: top;#addressContainer ブロックに追加してみました。

それはFF 14とOpera 12の下で私にとってはうまくいきました.

Answer 4

に追加できvertical-align: bottom;ます#addressContainer。