0

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

例如网站 | www.aLongNameShouldBeTruncated.com | 正在打开

应该像这样对齐：

在此处输入图像描述

我可以让它为 chrome 工作，见http://jsfiddle.net/LSuRx/5/：

但是我不能让这三个部分在 IE9 和 FireFox 中很好地垂直对齐：

在此处输入图像描述

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

4

4 回答 4

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 回答
1

给你的span. 像这样写：

span{vertical-align:top;}

检查这个http://jsfiddle.net/LSuRx/7/

于 2012-08-27T10:00:43.750 回答
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 回答