CODEWITHSUNDEEP
csstwitter-bootstrap
rouge8
rouge8

Reputation: 463

CSS word wrap with floating elements

I have a fixed-width sidebar consisting of a bootstrap nav-list where some list elements have right-aligned labels.

For example:

<li>
  <a href="#">abc_test_randomrandom</a>
  <span class="pull-right label">0000</span>
</li>

However, this doesn't work if the link is long. It expands to fill the whole line, and pushes the label to the next line.

I've put up a jsFiddle demo to demonstrate this behavior. EDIT: And now a gist too.

The desired behavior is abc_test_randomrandom and 0000 on the same line, with the long string wrapping to the next line if necessary. Is this possible?

Upvotes: 6

Views: 10840

Answers (3)

Tim Franklin
Tim Franklin

Reputation: 3060

In Bootstrap a pull-right is essentially just a wrapper for CSS float. You need to put the 0000 span before the abc_test_randomrandom in the markup and it should wrap the anchor to two lines as needed, so your floating element comes before the element it's floating around. You may need to set a margin-right of the anchor to be the width of your floated element. I can't get jsFiddle to load right now or else I'd give you a better example. I'll try checking back.

EDIT: I was able to get your jsFiddle to load.

If you move the spans before the anchors in your HTML and add this CSS, this works. If your text is literally going to have underscores instead of spaces then you'll need the word-wrap CSS that you mentioned in your own answer.

The benefit of this is it doesn't require CSS hacks (i.e. for display: inline-block) to work in older versions of IE, if that's a concern for your project.

.nav-list a { display: block; margin-right: 30px; }

screen shot from updated jsFiddle

Upvotes: 2

rouge8
rouge8

Reputation: 463

I think Praveen's solution is actually a better implementation, but to get the behavior originally requested, display: inline-block, word-wrap: break-word and setting the width fixes it.

li a {width: 70%; display: inline-block; word-wrap: break-word;}

word wrapping

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Yes. Use a fixed width and give overflow: hidden; for the excess with text-ellipsis.

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}

I am unable to open jsFiddle. So couldn't see the exact issue.

Upvotes: 2

Related Questions