html - 截断 Bootstrap 网格中的文本

Question

我正在使用 Bootstrap 列/网格系统。我如何截断 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;
}

Answer 1

您需要向包含消息的元素添加“最大宽度”，您的 CSS 才能正常工作。 IE。

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