ブートストラップグリッドのテキストを切り捨てます

Question

私はブートストラップcol/gridシステムを使用しています。どのようにして列内のテキストを切り捨てて、1行にすることができますか？エラーメッセージが切り捨てられて、左のボタンと同じ行に残るようにしたい（画像のぶれを参照）。

<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要素とスパンでこれを追加しようとしたが、それはあなたが「最大幅」を追加する必要がアイコン

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

Answer 1

下記のテキストを強制的にあなたのCSSが動作するように、メッセージを保持する要素に渡します。私。ちょうどライン持って同じ高さと行の高さを設定し

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

Answer 2

：

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

Answer 3

あなたは単語ブレークを使用することができますが、

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