0

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

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

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

ここに画像の説明を入力

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

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

ここに画像の説明を入力

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

4

4 に答える 4

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>
于 2012-08-27T12:52:22.203 に答える
1

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

span{vertical-align:top;}

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

于 2012-08-27T10:00:43.750 に答える
1

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

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

于 2012-08-27T09:59:59.597 に答える
1

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

于 2012-08-27T10:00:22.370 に答える