如何在保持按钮右对齐的同时折叠 header 中的文本？

Question

我正在努力寻找一种方法 css 来锁定 header 右侧的某些按钮，同时折叠与按钮一样宽的文本。我想让它们保持合理，只是 text-overflow: 省略了面包屑路径的主要文本，但似乎无法弄清楚。

Fiddle 在这里：https://jsfiddle.net/hLcm8jsf/

justify-content 和 text-overflow 似乎无法处理这个问题，我只是让我的按钮连续跳下。需要一些帮助，我还不是很擅长 css。

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

您需要做两件事才能完成这项工作：

将 display: flex; flex: 1; 和 min-width: 0; 添加到 .textbreadcrumb
将 text-overflow: ellipsis; white-space: nowrap; 和 overflow: hidden; 添加到包含要截断的文本的 span 元素

由于文本在 flexbox 子项中的包装方式，第 1 步是必要的。

看这里这里 https://css-tricks.com/flexbox-truncated-text/

第 2 步是必需的，因为您希望溢出发生在包含实际文本的 span 元素上。

这是添加了这些东西的演示： 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;
}

如何在保持按钮右对齐的同时折叠 header 中的文本？

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

css

breadcrumbs

justify

nowrap

bootstrap-4