关于只有一个文本溢出并排对齐两个跨距(Regarding aligning two spans side by side with only one text overflow)

我想在屏幕截图中对齐文本。 第一个跨度溢出，它应显示省略号，但第二个清除全部应始终显示在最后一个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;
    }

} 
  
 
 
 事实上这样的事情， - 
 
  
I want to align text as in screenshot. The first span is overflowing and it should display ellipses but, second clear all should always be displayed at right hand of last span element.
 
 
 
 
  
  
<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;
    }

} 
  
 
 
Something like this actually, -
 

                
最满意答案
                
                    
                        
 看看这个，我认为提供了你要求的元素： 
 
 
 
  
  
.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> 
  
 
Have a look at this which I think provides the elements you asked for:
 
 
 
  
  
.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>