在自舉網格中截斷文本

我正在使用自舉col /網格系統。我如何截斷col中的文本，以便強制一行？我希望我的錯誤消息被截斷，因此它與左邊的按鈕保持在同一行（請參見圖像打擊）。在自舉網格中截斷文本

<div class="row"> 
    <div class="col-md-3"> 

     <button class="btn btn-raised btn-primary btn-sm" ng-click="">Refresh</button> 

     <div class="btn-group"> 
      <a ng-click="" class="btn btn-success btn-raised btn-sm">Build</a> 
      <a class="btn btn-success btn-raised dropdown-toggle btn-sm" data-toggle="dropdown"><span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="">Action</a></li> 
       <li><a href="">Another action</a></li> 
       <li><a href="">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="">Separated link</a></li> 
      </ul> 
     </div> 

    </div> 
    <div class="col-md-8"> 

      <div class="" ng-show="true" style="height:18px;"> 
       <span class=""><i class="fa fa-exclamation-circle text-danger" aria-hidden="true"></i></span> 
       <span class=""> 
        <i>{{errorMessage}}</i> <!-- I want to truncate this so that a the buttons and the error message are on the same row ...--> 
       </span> 
      </div> 

    </div> 
</div>

我試圖在錯誤信息的div和span加入這一點，但它迫使圖標

.truncate { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2016-08-10 rex

標記中的任何元素都沒有'.truncate'類。查看所有在這個標記上運行的CSS代碼也是有幫助的，因爲診斷CSS代碼片段的問題可能是不可能的。如果你可以設置一個代碼來證明你的問題，那將是非常好的。 – McHat

你需要添加一個「最大寬度」下方的文本到持有該消息的元素，供您的CSS工作。即

<i style="max-width: 80%;">My extremely long error message</i>

來源

2016-08-10 15:16:39 Repo

設置相同高度和的line-height有短短一行：

.truncate { 
    line-height: 20px; 
    max-height: 20px; 
    overflow: hidden; 
    display:inline-block; 
}

來源

2016-08-10 15:25:28

你可以使用的字斷，

<style> 
.truncate { 
    word-break: break-word; 
} 
</style> 
<span class="truncate"> 
       <i>{{errorMessage}}</i> <!-- I want to truncate this so that a the buttons and the error message are on the same row ...--> 
      </span>

來源

2016-08-10 15:31:11

在自舉網格中截斷文本

回答

相關問題