Question

我想在屏幕截图中对齐文字。第一个跨度溢出，它应显示省略号，但第二个清除全部应始终显示在最后一个span元素的右侧。

＆＃13;

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

＆＃13;

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;
    }

}

＆＃13;

实际上是这样的， -

Answer 1

看看这个我认为提供你要求的元素：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: