Question

我正在使用bootstrap col / grid系统。如何截断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

你需要添加一个＆＃39; max-width＆＃39;保存消息的元素，让你的CSS工作。即

＆＃13;

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

＆＃13;

Answer 2

将相同的高度和 line-height 设置为只有一行：

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

Answer 4

通过Bootstrap 4，您可以使用text-truncate类。

<div class="text-truncate" ng-show="true" style="height:18px;">
    <span class="">
        <i>{{errorMessage}}</i>
    </span>
</div>

在引导网格中截断文本

4 个答案: