關於將兩個跨度並排排列，只有一個文本溢出

我想在屏幕截圖中對齊文本。第一個跨度溢出，應顯示橢圓，但第二個清除全部應始終顯示在最後一個跨度元素的右側。關於將兩個跨度並排排列，只有一個文本溢出

<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

關於將兩個跨度並排排列，只有一個文本溢出

回答

相關問題