关于将两个跨度并排排列，只有一个文本溢出

我想在屏幕截图中对齐文本。第一个跨度溢出，应显示椭圆，但第二个清除全部应始终显示在最后一个跨度元素的右侧。关于将两个跨度并排排列，只有一个文本溢出

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

 
\t \t \t \t \t <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 
 
\t \t \t \t \t </span> 
 
        
 
\t \t \t \t </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; 
 
    } 
 

 
}

像这样的事情实际上， -

来源

2015-11-02 Smitha

看一看这里面我想为您提供要求的元素：

.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>

来源

2015-11-02 07:25:10

我不希望它总是在正确的0，但总是在第一跨度的下一侧。 – Smitha

@Smitha更新了我的回答 –

看看我的解决方案。我使用绝对位置span.clear-all。我还设置padding-right到div.filter-display-bar，这等于span.clear-allwidth。这里是一个演示：http://jsfiddle.net/Stafox/qpu6xb3x/

来源

2015-11-02 08:11:35 Stafox

关于将两个跨度并排排列，只有一个文本溢出

回答

相关问题