在自举网格中截断文本

我正在使用自举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

在自举网格中截断文本

回答

相关问题