html - two divs side by side with ellipsis - issue with min-width -
i have 2 divs side side.
both divs must remain on same line (not 1 under other), despite length of contents of each div.
so used css text-overflow: ellipsis on both divs (cobbled different jsfiddle). work, except 1 small issue.
how can add min-width 2nd div class : .container > div:last-child (this div yellow background)?
i have tried add min-width: 150px; css class, kills text-overflow: ellipsis; effect.
i have attached jsfiddle example of trying achieve.
.container { display: -webkit-flex; } .container>div:first-child { white-space: nowrap; -webkit-order: 1; -webkit-flex: 1; background: aqua; -webkit-flex: 0 1 auto; /*important*/ text-overflow: ellipsis; overflow: hidden; width: auto; } .container > div:last-child { white-space: nowrap; -webkit-flex: 1; -webkit-order: 2; background: yellow; -webkit-flex: 1 0 auto; /*important*/ text-overflow: ellipsis; overflow: hidden; width: 150px; } .container > div:first-child:hover { white-space: normal; } .container > div:last-child:hover { white-space: normal; } <div class="container"> <div class="not_important1"> employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer </div> <div class="not_important2"> url url url url url url url url url url url url url url url url url url url url url url url url url </div> </div> i appreciate suggestions.
instead of using width property use flex property.
this have now:
.container > div:last-child { -webkit-flex: 1 0 auto; /*important*/ width: 150px; } instead try this:
.container > div:last-child { /* -webkit-flex: 1 0 auto; <-- remove */ flex: 1 0 150px; } this tells div have initial width of 150px, enables expand flex-grow: 1.
in effect, min-width: 150px , flex: 1 0 150px same thing.
learn more flex property @ mdn.
Comments
Post a Comment