Letting one div shrink if needed

Question

I'm sorry if this is a duplicate but I've so far been unable to find anything that works.

I have a sticky nav bar with some breadcrumbs etc and under certain circumstances one of the items might have a very long name. This forces the items on the far right to drop down on smaller screens.

Here is a mock what happens.

I want the really long line section to be able to shrink in cases where it would run into the others, always having the username and "logout" on the same line with the rest. When the long title section is too long, it should truncate and use ellipses.

     <div id="topNav" >
            <div class="toolBar">
                <div class="leftTools">
                    <div class="">
                        <span class="icon-group glyphicon"></span>
                        <a asp-area="" asp-controller="Home" asp-action="index">Base</a>
                    </div>
                    <div id="breadcrumb" class="">                            
                        <a class="listPageLink" href="">
                            <span class="icon-carrot-right glyphicon"></span>
                            <span class="linkText">Type</span>
                        </a>                            
                        <a class="itemPageLink" href="">
                            <span class="icon-carrot-right glyphicon"></span>
                            <span class="linkText">stupid really long title for something wow is this name way too long to be useful for anything</span>
                        </a>                            
                        <a class="subCatPageLink" href="">
                            <span class="icon-carrot-right glyphicon"></span>
                            <span class="linkText">subcat</span>
                        </a>                            
                    </div>
                </div>                    
                <div class="rightTools">
                    <div class="">
                        <a>@User.GetName()</a>
                        @if (User.Identity.IsAuthenticated)
                        {
                            <a asp-area="" asp-controller="Home" asp-action="Logout">Logout</a>
                        }
                    </div>
                </div>                    
            </div>
            <div class="fadeBorder"></div>
        </div>

What I don't want: I don't want to have to use javascript (if at all possible), just CSS. I don't want to have to write a bunch of media queries for different screen widths. I would rather not use css calc but if that is the only way then that is ok.

How can I accomplish this?

Edit: Here is a jsfiddle of the basic idea. https://jsfiddle.net/1h4maehs/

Edit2: This codepen is a better exaple: http://codepen.io/Nurdyguy/pen/dpdwGb

Post css and a working jsfiddle makes it more easy for help. — Dejan.S, Oct 07 '16 at 18:53
@hungerstar I'm not completely opposed to it, but if possible I would rather not use it. This feels like something that should be possible without it and I'm just missing the solution. — nurdyguy, Oct 07 '16 at 18:56

Paulie_D · Accepted Answer · 2016-10-07T19:32:49.860

2

Flexbox and text-overflow:ellipsis can help but it does require you to specify which items you do not want to shrink.

Like so:

* {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  list-style-type: none;
  white-space: nowrap;
  margin-bottom: 1em;
}
li {
  padding: 1em;
  white-space: nowrap;
  border: 1px solid green;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.no-shrink {
  flex-shrink: 0;
}
.right {
  margin-left: auto;
}

<div class="wrap">
  <ul>
    <li class="no-shrink">lorem</li>
    <li class="no-shrink">Lorem</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, facere.</li>
    <li class="no-shrink">lorem</li>
    <li class="no-shrink">lorem</li>
  </ul>
</div>

<div class="wrap">
  <ul>
    <li class="no-shrink">lorem</li>
    <li class="no-shrink">Lorem</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li class="no-shrink right">lorem</li>
    <li class="no-shrink">lorem</li>
  </ul>
</div>

As mentioned in the comments, you can also create a "float:right` option, if required, for the last couple of items.

edited Oct 07 '16 at 19:32

answered Oct 07 '16 at 19:23

Paulie_D

107,962
13
142
161

I've been trying to use flexbox but (and you can't tell this from above) the user name and "logout" are part of a `float:right` which then no longer works inside the flexbox. – nurdyguy Oct 07 '16 at 19:28
Moving things to the right is no problem in flexbox. - http://codepen.io/Paulie-D/pen/bwLQBN – Paulie_D Oct 07 '16 at 19:31
That helped, thanks. I now have it partially doing what I want. As I make the window narrower, the long line begins to shrink and turns into ellipses, but only to a point. After maybe 100px is stops shrinking and then the stuff on the right is off the side of the screen. Any idea why that happens? – nurdyguy Oct 07 '16 at 19:36
Here is what I have: http://codepen.io/Nurdyguy/pen/dpdwGb this works great at first but it stops shrinking when you get to the "f" in "useful". Do you have any idea why? – nurdyguy Oct 07 '16 at 20:34
I was able to find the issue described in my last comment. When you use flexbox and `white-space:nowrap` there can be issues. The solution for that can be found here: http://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size – nurdyguy Oct 10 '16 at 16:29

score 0 · Answer 2 · answered Oct 07 '16 at 19:00

0

Personally I'd implement text-overflow: ellipsis; while giving each breadcrumb a maximum amount of space each can take up. If they exceed it, add ellipsis and hide the rest.

.item {
  display: inline-block;
  max-width: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.divider {
  vertical-align: top;
}

<div class="breadcrumb">
  <span class="item">Apple</span>
  <span class="divider">></span>
  <span class="item">Banana</span>
  <span class="divider">></span>
  <span class="item">Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry</span>
  <span class="divider">></span>
  <span class="item">Doh!</span>
</div>

answered Oct 07 '16 at 19:00

hungerstar

21,206
6
50
59

I think my underlying issue is that there is a lot of other stuff going on on the page which is complicating the matter. I have tried what you have here and it isn't quite what I want. The issue is that sometimes there is plenty of space for the whole title and in that case I want to show it. In other circumstances it won't fit so I do the ellipses stuff. – nurdyguy Oct 07 '16 at 19:02
Ah, okay. I'll have to ruminate a bit on that. Unknown text lengths are a bit of a moving target. – hungerstar Oct 07 '16 at 19:03

Letting one div shrink if needed

2 Answers2