CODEWITHSUNDEEP
htmlcss
GarethOwen
GarethOwen

Reputation: 6133

CSS Aligning multiple text parts

I'm trying to align three text parts, where the middle part has a max-width and can be truncated using the text-overflow:ellipsis property.

e.g. The site | www.aLongNameShouldBeTruncated.com | is opening

should be aligned like this:

enter image description here

I can get it to work for chrome, see http://jsfiddle.net/LSuRx/5/:

But I can't get the three parts to vertically align nicely in IE9 and FireFox:

enter image description here

Anyone know how I can solve this?

Upvotes: 0

Views: 89

Answers (4)

Itay Gal
Itay Gal

Reputation: 10824

This works for me:

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

Upvotes: 1

sandeep
sandeep

Reputation: 92873

Give vertical-align:top to your span. Write like this:

span{vertical-align:top;}

Check this http://jsfiddle.net/LSuRx/7/

Upvotes: 1

Ariel
Ariel

Reputation: 26783

You can add vertical-align: bottom; to #addressContainer.

Upvotes: 1

Chris
Chris

Reputation: 531

I tried adding vertical-align: top; into the #addressContainer block.

That worked for me under FF 14 and Opera 12.

Upvotes: 1

Related Questions