时间戳

首页 > 解决方案 > 如何在保持按钮右对齐的同时折叠标题中的文本？

css - 如何在保持按钮右对齐的同时折叠标题中的文本？

问题描述

我正在努力寻找一种使用 css 的方法来锁定标题右侧的一些按钮，同时如果文本与按钮一样宽则折叠文本。我想让它们保持合理，只是文本溢出：省略面包屑路径的主要文本，但似乎无法弄清楚。

小提琴在这里：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>

标签： cssbootstrap-4breadcrumbsjustifynowrap

解决方案

你需要做两件事来完成这项工作：

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

第 1 步是必要的，因为文本包裹在 flexbox 子项中的方式。

请参阅此处https://stackoverflow.com/a/59009107/10565536 和此处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;
}

推荐阅读