CSS对齐多个文本部分

Question

我正在尝试对齐三个文本部分，其中中间部分具有最大宽度，可以使用text-overflow：ellipsis属性进行截断。

e.g。网站| www.aLongNameShouldBeTruncated.com |正在开放

应该像这样对齐：

我可以让它适用于chrome，请参阅http://jsfiddle.net/LSuRx/5/：

但我无法让这三个部分在IE9和FireFox中完全对齐：

任何人都知道如何解决这个问题？

Answer 1

我尝试将vertical-align: top;添加到#addressContainer块中。

在FF 14和Opera 12下，这对我有用。

Answer 2

您可以将vertical-align: bottom;添加到#addressContainer。

Answer 3

将 vertical-align：top 提供给span。写得像这样：

span{vertical-align:top;}

选中此http://jsfiddle.net/LSuRx/7/

Answer 4

这对我有用：

<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>