Welcome to WebmasterWorld Guest from 34.225.194.144

Forum Moderators: not2easy

Message Too Old, No Replies

Prevent float from wrapping and force text-overflow if needed

     
9:19 pm on Sep 6, 2016 (gmt 0)

Full Member

10+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:227
votes: 1


I have three fields I would like on one line:

<div><span class="name">Blue Widgets Over Miami</span><span class="size"> large </span><span class="price">$9.99</span></div>

I'd like .name and .size to be on the left side of the line, .price on the right, and to always have at least a space separating the fields.

Here's the tricky part though. If the screen is really narrow, I don't want the div to wrap or overflow. Instead I'd like for name to text-overflow as an ellipsis.

div{background:#abcdef;white-space:nowrap}
.name{text-overflow:ellipsis}
.size{}
.price{float:right}

Right now if the screen is narrow then .price drops to a second line (which I don't want), and if the screen is even narrower then .name and .size overflow the div (which I also don't want), and .name never truncates with some ellipsis.

What am I doing wrong?
1:50 am on Sept 7, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4601
votes: 376


Have you thought of using flex properties to control the containers? That would allow better control of their behaviors and varying widths. Each container could be assigned a flex grow number to control its ratio to the other containers.

Float can cause wrapping on resize, flex just adjusts to it. You can read more and see examples at Mozilla Developers CSS reference: [developer.mozilla.org...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members