1

Here is a jsfiddle showing the behavior I want to implement:

JSFiddle That Uses Flex Layout

<span>See JSFiddle For Code</span>

Image Showing Rightmost Div Displaying Ellipsis

You see that I have multiple div elements displayed in a row. Each div displays some text. As the parent div is resized narrower, I want the rightmost currently displayed div to shrink (displaying ellipsis). Notice that as you shrink the fiddle frame width, or shrink the browser, only the rightmost div is shrunk, displaying the ellipsis.

The jsfiddle uses flex layout to do this, but I need a solution that does not use flex layout or JavaScript.

I have tried messing around with making each div use display:inline-block, and a few other techniques, but no luck.

steve
  • 11
  • 3

2 Answers2

0

I think you want like that. kindly check demo

.parent
 {
  display: table;
 }
.child
 {
 display: table-cell;
 }
Jay
  • 151
  • 1
  • 13
  • No. That is not it. What you have done is created a table where all the divs in the table are shrinking and expanding at the same time. I am looking for a way to always be shrinking the rightmost div. Look at the JSFiddle I wrote and see how it behaves. I need to do the same thing WITHOUT using the flex layout. – steve May 04 '16 at 07:40
  • Your example expands and contract all the divs together. That is not the same behavior as my example which contracts whatever the rightmost div is. Use my JSFiddle example and resize the width of the browser and see how it is always the rightmost div that shrinks. – steve May 04 '16 at 07:43
0

I figured it out and updated the JSFiddle to show how to do it by simply using display:inline. The flex solution was far more complicated than it needed to be.

steve
  • 11
  • 3