javascript - 关于并排对齐两个 span 只有一个文本溢出

Question

我想对齐屏幕截图中的文本。第一个 span 溢出，它应该显示省略号，但是第二个 clear all 应该始终显示在最后一个 span 元素的右侧。

<div class="col-sm-12 col-md-12 col-lg-12 filter-display-bar"
					title="{{vm.filterSelectionsTitle}}"
				>
					<span>
						{{vm.filterSelections}}
                    </span>

					<span class="clear-all" title="Clear All"
                            ng-show="vm.listOptionResorts.length !== 0 || vm.listOptionStatus.length !== 0 || vm.listOptionArrivalDate.length !== 0 || (vm.startTime !== undefined && vm.startTime !== '') || (vm.endTime !== undefined && vm.endTime !== '')"
                            ng-click="vm.clearEverything()">
                         Clear All 
					</span>
                    
				</div>

div.filter-display-bar{
    width: 90%;
    .heightFifty;
    margin: 0 auto;
    background-color: #F2F2F2;
    font-family: Avenir-Book,Helvetica,Arial;
    font-style: Book;
    font-size: 14px;
    color: #000;
    line-height: 50px;
    padding-bottom: 10px;
    padding-left: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span.clear-all{
        color: #40A8E2;
        cursor: pointer;
        width: 84px;
        background-color: #F2F2F2;
        position: fixed;
        right: 104px;
    }

}

实际上是这样的，-

Answer 1

看看这个，我认为它提供了您要求的元素:

.filter-display-bar {
  overflow: hidden;
  line-height: 1.1;
  vertical-align: bottom;
}
.long-text {
  display: inline-block;
  max-width: calc(100% - 60px);

  white-space: nowrap;
  text-overflow: ellipsis;  
  overflow: hidden;
}

.clear-all {
  display: inline-block;
  color: steelblue;
  cursor: pointer

  white-space: nowrap;
  overflow: hidden;
}

<br>
<br>
<div class="filter-display-bar">
    <span class="long-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</span>
    <span class="clear-all">
        Clear all
    </span>
</div>