How to collapse text in a header while keeping buttons right justified?

Question

I am struggling to find a way with css to lock some buttons on the right side of my header, while collapsing the text if it gets as wide as the buttons. I want to keep them justified and just text-overflow: ellipsis the main text of the breadcrumb trail but can't seem to figure it out.

Fiddle is here: https://jsfiddle.net/hLcm8jsf/

justify-content, and text-overflow don't seem to handle this, I just get my buttons jumping down a row. Needs some help, I'm not that great at css yet.

body {
    font-size: 16px;
    background-color: #222;
    color: white;
}
h2 {
    font-size: 2em;
}
a {
    color: rgb(85, 109, 172);
}
a:hover {
    color: rgb(85, 109, 172);
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.row {
    margin: 0px;
    padding: 3px;
    width: 100%;
}
.rowjustify {
    justify-content: space-between;
}
.header {
    background: #002550;
    display: flex;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
}
.textbreadcrumb {
    margin-top: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}  

<div class="row header rowjustify">
  <div class="textbreadcrumb">
    <a href="" ng-show="showPhotos||showImage||showConfig" ng-click="setPage('Albums')">Albums</a>
    <span ng-show="true">>
      <a href="" ng-click="setPage('Photos')">{{album name here}}</a>
    </span>
    <span ng-show="showImage">&nbsp;>&nbsp;{{photo name here, which can be a long name}}</span>
  </div>
  <div ng-show="showImage">
    <button type="button" class="btn btn-primary btn-sm" ng-click="prevImage()" ng-disabled="photo_id==0">Prev</button>
    <button type="button" class="btn btn-primary btn-sm" ng-click="nextImage()" ng-disabled="photo_id >= gallery.albums[album_id].photos.length-1">Next</button>
    <button type="button" tooltip="Set as Album Cover Photo" class="btn btn-primary btn-sm" ng-show="showLogin" ng-click="setCover()">Set As Cover</button>
  </div>
</div>  

Answer 1

You need to do two things to make this work:

1. Add display: flex; flex: 1; and min-width: 0; to .textbreadcrumb
2. Add text-overflow: ellipsis; white-space: nowrap; and overflow: hidden; to the span element with the text you want to cut off

Step 1 is necessary because of the way text is wrapped in flexbox children.

See here https://stackoverflow.com/a/59009107/10565536 and here https://css-tricks.com/flexbox-truncated-text/

Step 2 is necessary because you want the overflow to occur on the span element holding the actual text.

Here is a demo with those things added: https://jsfiddle.net/withn/6t1s3x2w/

<div class="row header rowjustify">
  <div class="textbreadcrumb">
    <a href="" ng-show="showPhotos||showImage||showConfig" ng-click="setPage('Albums')">Albums</a>
    <span ng-show="true">>
      <a href="" ng-click="setPage('Photos')">{{album name here}}</a>
    </span>
    <span ng-show="showImage" class="temp1">&nbsp;>&nbsp;{{photo name here, which can be a long name}}</span>
  </div>
  <svg viewBox="0 0 56 18">
    <text x="0" y="15">Fit Me</text>
  </svg>
  <div ng-show="showImage">
    <button type="button" class="btn btn-primary btn-sm" ng-click="prevImage()" ng-disabled="photo_id==0">Prev</button>
    <button type="button" class="btn btn-primary btn-sm" ng-click="nextImage()" ng-disabled="photo_id >= gallery.albums[album_id].photos.length-1">Next</button>
    <button type="button" tooltip="Set as Album Cover Photo" class="btn btn-primary btn-sm" ng-show="showLogin" ng-click="setCover()">Set As Cover</button>
  </div>
</div>

body {
    font-size: 16px;
    background-color: #222;
    color: white;
}
h2 {
    font-size: 2em;
}
a {
    color: rgb(85, 109, 172);
}
a:hover {
    color: rgb(85, 109, 172);
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.row {
    margin: 0px;
    padding: 3px;
    width: 100%;
}
.rowjustify {
    justify-content: space-between;
}
.header {
    background: #002550;
    display: flex;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
}
.textbreadcrumb {
    min-width: 0;
    display: flex;
    flex: 1;
    margin-top: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}  
.temp1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}